javascript - jQuery/JavaScript 等待页面加载，但不短于指定时间

Question

我遇到以下问题:

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

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

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

这对我来说似乎合乎逻辑。没用。我用setInterval替换了setTimeout，也不起作用。我把 $(window).load...等。在函数中并使用外部 setTimeout 调用它，但没有成功。关于该额外计时器的最佳结果是，浏览器完全忽略它；大多数时候，覆盖层只是停留在那里，什么也没有发生。

我错过了什么？

Answer 1

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

<小时/>

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

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

});