我已经实现了以下脚本,确保预加载器页面显示在我的网站主页上,直到主页内容完全加载。
我想调整以下内容,以确保预加载器始终显示最短的时间(即 1 秒),以确保它始终显示,即使在快速连接上也是如此。预加载器应显示至少 1 秒,或直到加载主要内容 - 以先到者为准。这可能吗?
HTML
<div class='preloader'>
<div class="preloader-logo">Logo</div>
<div class="preloader-loading-icon">Loading</div>
</div>
<main>Content goes here, should be hidden initially until fully loaded (or 1s have lapsed).</main>
JS
/* Preloader Splash */
$(window).load(function(){
$('main').animate({opacity: 1},300);
$('.preloader').fadeOut(500);
});
CSS
.preloader {
display: block;
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
z-index: 9999;
background: rgba(255,102,51,1);
}
.preloader-logo {
background: url(images/ui-sprite.svg) no-repeat 0 -300px;
position: absolute;
width: 140px;
height: 58px;
top: 50%;
left: 50%;
text-indent: -9999px;
}
.preloader-loading-icon {
background: url(images/preloader-loading.svg) no-repeat 50%;
text-indent: -9999px;
position: relative;
top: 50%;
left: 50%;
margin-top: 90px;
width: 40px;
height: 40px;
}
最佳答案
不确定我喜欢这个,但它是实现您正在寻找的东西的简单方法:
var timedOut = false;
var loaded = false;
/* Preloader Splash */
$(window).load(function(){
loaded = true;
hideLoading();
});
setTimeout(function(){
timedOut = true;
hideLoading();
}, 1000);
function hideLoading(){
if(loaded && timedOut){
$('#container').animate({opacity: 1},300);
$('.preloader').fadeOut(500);
}
}
这意味着只有经过1s,加载才会隐藏加载,如果页面已经加载,1s就会关闭加载。
原答案:
页面加载完成后可以显示1s:
/* Preloader Splash */
$(window).load(function(){
setTimeout(function(){
$('#container').animate({opacity: 1},300);
$('.preloader').fadeOut(500);
, 1000);
});
可能有更好的方法,因为这意味着即使在加载速度较慢的页面上,也会在加载完成后 1 秒而不是立即加载。所以加载时间 + 1s 而不是加载时间或 1s
关于javascript - Div 显示至少 1 秒,或直到主要内容加载 - 以先到者为准,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33415238/