javascript - .bind (“load”)侦听器事件的jQuery备用

使用以下脚本添加事件侦听器，基本上说:“隐藏#curtain div(整个页面)，直到下载.bgImage，然后等待1500ms并淡入所有内容”。

我的问题是这样的-有时由于服务器延迟或.bind("load")的故障触发而导致页面未淡入。如何添加某种timeOut效果，以便如果未触发.bind("load)事件则在X毫秒后触发？

$(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(); });

});

最佳答案

您可以做的是:

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;