html 内容出现在加载开始之前

Question

我复制了一些 JavaScript 代码只是为了等到所有内容都加载完毕然后显示内容。问题是，有时我会在加载程序启动前看到一闪而过的内容，这不是我想要的。

这里我做了一个代码笔来简化事情。

$(document).foundation();


(function($) {



$WIN = $(window);

// Add the User Agent to the <html>
// will be used for IE10 detection (Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0))
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);


   /* Preloader
    * -------------------------------------------------- */
var clPreloader = function() {
    
    $("html").addClass('cl-preload');

    $WIN.on('load', function() {

        //force page scroll position to top at page refresh
        // $('html, body').animate({ scrollTop: 0 }, 'normal');

        // will first fade out the loading animation 
        $("#loader").fadeOut("slow", function() {
            // will fade out the whole DIV that covers the website.
            $("#preloader").delay(300).fadeOut("slow");
        }); 
        
        // for hero content animations 
        $("html").removeClass('cl-preload');
        $("html").addClass('cl-loaded');
    
    });
};

/* Initialize
* ------------------------------------------------------ */
(function ssInit() {
    
    clPreloader();
   
    
})();
    
    
})(jQuery);

Answer 1

尝试使用

$(document).ready(function(){

而不是

$WIN.on('load', function() {

Answer 2

扩展我的评论...

That is because JS loads after the DOM has first rendered. What you need to do is apply a class to the body element that makes it display:none and then remove that class when the page has loaded and your javascript has run. CSS renders before JS.

如果您不能在正文中这样做，请将您的内容包裹在 div 中，并将加载器放在 div 之外，如下所示：

<body>
  <div id="loader"></div>
  <div id="content" class="hidden">/* website content here*/</div>
</body>

就像我之前说的，当你准备好并加载时，只需删除隐藏的 class。

Answer 3

这可能是一种方式：

CODEPEN

我将预加载器之后的所有内容都包裹在一个主体中，并在上面放了一个 ID。

<body id='bdy'>

然后，在加载您的预加载器后，您再次将 body 的可见性设置为可见。

clPreloader();
document.getElementById('bdy').style="display:block";

Answer 4

是的，javascript 在 DOM 之后加载。你应该给你的 body 一个标识符（比如 ID）：<body id="mySite">

然后你可以在你的CSS中设置那个ID的CSS隐藏：#mySite: display:none;。这将在网站最初加载时隐藏任何内容。

然后，一旦您的 javascript 加载完毕，您就可以撤消该规则。 document.getElementById("mySite").style.display = "block"; 之类的东西可以工作。

如果 display 规则不起作用，请尝试 visibility: hidden; 和 visibility: visible;，它们应该同样有效。

html 内容出现在加载开始之前

The html content appears before the loading starts

javascript

loading

zurb-foundation