1

我有以下问题：

我想显示一个覆盖，直到页面完全加载，这工作得很好。问题是在快速连接上覆盖会立即消失，这不是我想要实现的。

我试图通过以下方式做到这一点：

$(document).ready(function(){
    setTimeout(function(){
        $(window).load(function(){
            $('#overlay').fadeOut(1200);
        });
    },1500);
});

这对我来说似乎是合乎逻辑的。没用。我将 setTimeout 替换为setInterval, 也没有用。我把$(window).load...等。在一个函数中并用外部调用它setTimeout，没有成功。关于那个额外的计时器，最好的结果是浏览器完全忽略了它。大多数情况下，叠加层只是停留在那里，没有任何反应。

我错过了什么？

4

1 回答 1

0

你当然不需要$(window).load...内setTimeout函数。事实上，将它放在超时范围内将确保它永远不会执行，因为 window.load 事件在您将函数分配给fadeOut覆盖之前已经触发。

我已经根据您的反馈调整了我的代码。基本原则是确定一切准备就绪需要多长时间，然后根据已经过去的时间减少超时。这样，您最快的连接仍然会延迟，而最慢的连接将立即执行淡出。

Live Demo

//Put this line in a script tag as high up on the page as possible
window.timeInMs = Date.now();

代替在加载文档后执行的 document.ready ，使用在加载整个页面（框架、对象、图像）后执行的 window.load - src。

$(window).load(function(){
    var maxTimeout = 1500;//Everyone waits at least this amount, including fast browsers.

    //Compute the elapsed time, default to 0 if more than maxTimeout has elapsed. 
    var remainingTime = Math.max(maxTimeout - (Date.now() - window.timeInMs), 0);

    setTimeout(function(){
        $('#overlay').fadeOut(1200);
    }, remainingTime);

});
于 2013-08-31T20:17:14.573 回答