我已经实现了以下脚本,可确保在主页完全显示预加载器页面之前显示预加载器页面。

我想对以下内容进行调整,以确保预加载器始终出现最短的时间(即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将关闭加载。

原始答案:

页面加载完成后,您可以将其显示1秒钟:

/* Preloader Splash */
$(window).load(function(){
    setTimeout(function(){
        $('#container').animate({opacity: 1},300);
        $('.preloader').fadeOut(500);
    , 1000);
});


可能有更好的方法,因为这意味着即使在缓慢加载的页面上,加载完成后也将是1秒而不是立即加载。因此加载时间+ 1s,而不是加载时间或1s

09-10 10:25
查看更多