使用 jQuery 设置淡出预加载屏幕的时间

Question

我需要一些帮助。我试图创建一个自定义预加载屏幕，如this。但是在本教程中，作者在三秒后淡出他的覆盖元素（伪造它）。 我知道要在页面加载后淡出预加载屏幕，我需要使用$(window).load()：

$(window).load(function(){
       // PAGE IS FULLY LOADED  
       // FADE OUT YOUR OVERLAYING DIV
});

但关键是我需要加载进度。实际上，我希望它至少持续 3 秒，例如，如果加载时间是 4 秒，它会持续 4 秒。但是如果加载时间小于 3 秒，仍然会持续 3 秒。

我有一个使用stroke-dashoffset 和stroke-dasharray 绘制的徽标，所以我需要代码给它足够的时间来绘制它。

另外，我希望有一个计数器来获取满载之前的剩余时间。我要把它转换成加载进度的百分比。

有人可以帮我做吗？

Answer 1

页面的剩余加载时间是不可知的。网络拥塞、错误、处理器速度（服务器和客户端）、GPU 速度以及客户端不可见的许多其他因素都会影响加载时间。您没有足够的信息来了解请求和页面呈现需要多长时间。

根据你的这个问题：

实际上，我希望它至少持续 3 秒，如果加载时间是 例如 4 秒，它持续 4 秒。但是如果加载时间是 不到3秒，依然持续3秒。

然后只需使用 3000 毫秒的 setTimeout 来淡出加载屏幕。使用几个变量来跟踪时间是否已过并且页面是否已加载：

var pageLoaded = false;
var timeElapsed = false;

function fadeOutLoadScreen() {
    if(timeElapsed && pageLoaded) {
        // do fadeOut stuff here
    }
}

setTimeout(function(){ 
    timeElapsed = true;
    fadeOutLoadScreen();
}, 3000);

$(window).load(function(){
    pageLoaded = true;
    fadeOutLoadScreen();
});