.bind（“ load”）偵聽器事件的jQuery后備

Question

使用以下腳本添加事件偵聽器，基本上說“隱藏#curtain div （整個頁面），直到下載.bgImage ，然后等待1500ms並淡入所有內容”

我的問題是這樣的-有時由於服務器延遲或.bind("load")的故障觸發而導致頁面未淡入。如何添加某種timeOut效果，以便如果.bind("load)在X毫秒后觸發.bind("load)事件未觸發？

$(document).ready(function(){

// #curtain DIV begins hidden then fades in after .bgImage (curtain) is loaded - prevents "ribbon" loading effect in Chrome

$('#curtain').hide();
$(".bgImage").bind("load", function () {$('#curtain').delay(1500).fadeIn(); });

});

Answer 1

$(".bgImage").bind("load", function () {
    setTimeout(function() {
        $('#curtain').delay(1500).fadeIn();
    }, 500);
});

如果您要為fadeIn動畫添加延遲，則將有所幫助。 干杯

Answer 2

您可以使用如下形式：

var timeout;
$(".bgImage").bind("load", function(){
  clearTimeout(timeout);
  // do something here
});
timeout = setTimeout(function(){
  $(".bgImage").unbind("load");
  // do something else instead
}, 10000);

也許還處理錯誤：

$(".bgImage").bind("error", function(){
  // do something else here as well
});

更新：我添加了代碼，以在發生負載時取消您的超時。 這兩個功能必須能夠互相抵消。

Answer 3

您可以執行以下操作：

var url = $('.bgImage').attr('src');
var img = new Image();
img.onload = function() {
  $('#curtain').delay(1500).fadeIn();
};
img.src = url;

以我的經驗，只要在設置“ src”之前先設置“ Image”對象的“ onload”屬性，處理程序就會一直運行。

編輯 -如果您想確保事物最終消失，則可以執行以下操作：

var allDone = false;
var url = $('.bgImage').attr('src');
var img = new Image();
img.onload = function() {
  if (!allDone) {
    $('#curtain').delay(1500).fadeIn();
    allDone = true;
  }
};
setTimeout(img.onload, 5000); // show the hidden stuff after 5 seconds, image or no image
img.src = url;

Answer 4

嘗試將其添加到您的CSS：

#curtain {
display:none;
}

並在您的文檔中使用read（）：

$(.bgImage).load(function() {
    $('#curtain').fadeIn(3000);
});