Question

我正在实现一个非常简单的预加载器页面，直到主页面内容完全加载为止。加载页面工作正常但我只是在预加载器页面到位之前显示主页面内容的小问题，导致内容难看的闪烁。

我在下面提供了一个实时链接，因为由于需要加载时间而很难在小提琴中复制，是否有人能够提供一些有关如何确保首先加载预加载页面的见解？

感谢。

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

JS

/* Preloader Splash */
$(window).load(function(){
     $('.preloader').fadeOut(500);
});

Link

Answer 1

默认情况下将main元素设置为隐藏，并在淡出预加载器之前显示它：

main {
    display: none;
}

$(window).load(function(){
    $('main').show();
    $('.preloader').fadeOut(500);
});

强制页面预加载器出现在任何内容之前

1 个答案: