Question

我对Js很陌生。我复制了一些代码，只是为了等到所有内容加载完毕后再显示内容。事实是，有时在加载程序启动之前，我会看到一堆内容，这不是想要的。

在这里，我做了一个Codepen以简化操作。

非常感谢高级人员，我是JS的新手。

欢呼

$(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

是的，JavaScript在DOM之后加载。您应该给您的身体一个标识符（例如ID）：<body id="mySite">

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

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

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

Answer 2

扩大我的评论...

这是因为JS在DOM首次呈现后即加载。您需要做的是将一个类应用于body元素，使其显示为：none，然后在页面加载且您的javascript运行时删除该类。 CSS在JS之前呈现。

如果无法在正文上执行此操作，则将内容包装在div中，然后将加载程序放在div之外，如下所示：

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

就像我之前说过的，只要准备好并加载它，就删除隐藏的类。

Answer 3

这可能是一种方法：

CODEPEN

我将预紧器之后的所有东西都包裹在身上，并在上面放了一个id。

<body id='bdy'>

然后，在加载预加载器后，将车身的可见性重新设置为可见。

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

Answer 4

尝试使用

$(document).ready(function(){

代替

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

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

4 个答案: