使用 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 速度以及客户端不可见的许多其他因素都会影响加载时间。您没有足够的信息来了解请求和页面呈现需要多长时间。

根据你的这一段问题：

Actually, I want it to last at least 3 seconds and if the load time is 4 seconds for example, it lasts 4 seconds. But if the loading time is less than 3 seconds, it still lasts 3 seconds.

然后只需使用 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();
});

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

Set Time for fading out PreLoad Screen using jQuery

javascript

jquery

fadeout

preload

preloading