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

使用jQuery设置淡出PreLoad屏幕的时间

1 个答案: