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

Question

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

我在下面提供了一个实时 link，因为由于加载时间的需要，很难在 fiddle 中复制，任何人都可以提供一些关于如何确保预加载器页面始终的见解首先加载？

谢谢。

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

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

Force page preloader to appear before any content

html

javascript

css

jquery

preloader