簡體   English   中英

僅當另一個功能完全啟動時,如何才能啟動一個功能?

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM