![](/img/trans.png)
[英]how i can start a function inside my javascript when an image is fully loaded
[英]How can I let a function start, only when an other function has fully started?
我有個問題。 我有一個全屏(不是背景!僅用於我的單頁網站的介紹。)圖像幻燈片。 (使用backstretch創建的,真正的jQuery代碼在另一個.js文件中。)您將在下面的代碼中看到它。 現在我有一個問題。 我將文本放置在具有相同周期持續時間的中央,以便它與文本同時更改圖像。 但是,當我將網頁上傳到服務器時,圖像的加載速度比文本加載速度慢。 結果是,文本循環在圖像滑塊之前開始。 我可以設置一個功能,以便僅在圖像循環開始后才開始循環文本嗎? 我已經嘗試過“卸載”功能,但是圖像比文本要快。 (當我打開網站時,還可以包括一個加載輪,這樣整個網站都可以加載。請告訴我您是否不明白我的意思)
<!-- Intro Header --> <header class="intro"> <!-- Backstretch JS --> <!-- <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> --> <script src="js/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="js/jquery.backstretch.js"></script> <script> $.backstretch([ "images/myimage1.png", "images/myimage2.png", "images/myimage3.png", "images/myimage4.png" ], { fade: 750, //Speed of Fade duration: 5000 //Time of image display }); </script> <div class="brand-heading"> <script src="http://code.jquery.com/jquery-1.7.min.js"></script> <script> $(function () { var messages = [], index = 0; messages.push('Message 1'); messages.push('Message 2'); messages.push('Message 3'); function cycle() { $('#some-id').html(messages[index]); index++; if (index === messages.length) { index = 0; } setTimeout(cycle, 5750); } cycle(); }); </script> <div id="some-id"></div> </div> </header>
查看backstretch文檔,我將使用backstretch.before和/或backstretch.after方法。
$(function () {
var messages = [],
messages.push('Message 1');
messages.push('Message 2');
messages.push('Message 3');
$(window).on("backstretch.after", function (e, instance, index) {
$('#some-id').html(messages[index]);
});
});
使用complete和naturalWidth屬性檢查圖像是否已加載。
這很簡單。 檢查complete和naturalWidth是否> 0:圖像正常。
function IsImageOk(img) {
if (!img.complete) {
return false;
}
if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
return false;
}
return true;
}
在此處閱讀更多內容: 檢查是否在JavaScript中加載了圖片(無錯誤)
正如MazzCris所說的(但是如果需要的話我會提供澄清),請使用backstretch.after而不是setTimeout(cycle, 5750);
該代碼將是:
var messages = [],
index = 0;
messages.push('Message 1');
messages.push('Message 2');
messages.push('Message 3');
function cycle() {
$('#some-id').html(messages[index]);
index++;
if (index === messages.length) {
index = 0;
}
}
$(window).on("backstretch.after", function (e, instance, index) {
cycle();
});
如果要保留cycle()
作為可調用函數。
旁注:您可以使用其中的值定義messages
數組,而不必使用messages.push
,除非出於某種原因要這樣做。
如果這只是您碰巧的方法,則可以將其更改為:
var messages = ['Message 1', 'Message 2', 'Message 3'],
index = 0;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.