Question

使用以下脚本添加事件监听器，基本上它表示“隐藏#curtain div（整页），直到.bgImage下载，然后等待1500毫秒并淡出”

中的所有内容

我的问题是这个 - 有时候由于服务器滞后或者.bind("load")的错误触发，页面没有淡入。我怎样才能在效果上添加某种timeOut，以便在X毫秒后触发{％{ {1}}事件未被触发？

.bind("load)

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

jQuery回退.bind（“load”）监听器事件

4 个答案: