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

我需要一些帮助。我已经尝试创建一个自定义预加载屏幕，如。但在本教程中，作者在三秒后淡出覆盖元素（伪造）。 我知道要在页面加载后淡出预加载屏幕，我需要使用

$（window.load（）

：

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

我有一个使用

笔划dashoffset

和

笔划dasharray

绘制的徽标，所以我需要代码给它足够的时间来绘制它

另外，我想有一个计数器来获得剩余的时间，直到完全加载。我将把它转换为加载进度的百分比

---

有人能帮我吗？

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

根据你的问题：

实际上，我希望它至少持续3秒，如果加载时间是 例如，它持续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();
});

---

非常感谢，这对我的问题非常有用。但关于另一个问题，我见过很多网站使用加载进度百分比。你认为他们也会假装吗？是的，他们会假装，至少如果他们期望百分比随时间线性增加的话。现在，您可以根据加载的对象数量计算百分比，但这更为复杂，并且不能很好地指示进度，因为您仍然不知道加载每个对象需要多长时间。

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