Question

我的网站有一个preloader启动页面，我希望在加载时显示，并在2s后淡出，显示下面的主要网站内容。

我有下面的代码，它可以很好地在窗口加载时显示启动页面，但我想用一个简单的2s延迟替换它，这样它总是会出现，即使对于那些超快速连接的人也是如此。目前，在快速连接时它会逐渐消失。

感谢。

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.</main>

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

main { opacity: 0; } Hide main content to avoid flash before preloader initialises */

JS

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

Answer 1

使用setTimeout

$(window).load(function(){
    setTimeout(function() {
        $('#container').animate({opacity: 1},300);
        $('.preloader').fadeOut(500);
    }, 2000);
});

启动页面显示2秒，然后显示.fadeout

1 个答案: