0

我有一个从模板更改的网页。我患有 FOUC（无样式内容的 Flash）。

我从这里尝试了一个解决方案：https ://docs.google.com/presentation/d/1jt_VQC5LDF-e9j8Wtxu4KZPa8ItlmYmntGy5tdcbGOY/present?slide=id.p

但无法让它工作。这是我的主要部分，脚本正在调用我的 CSS（我想！）。

<head>
    <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
    <script src="js/jquery.min.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/skel-layers.min.js"></script>
    <script src="js/init.js"></script>
</head>

<body id="top">
            bunch of stuff to hide until style has loaded. 
</body>

这个解决方案的想法是暂停内容的加载，直到 CSS 加载完毕，但我不确定在使用 java 脚本调用时它是否会起作用。

这是我尝试过的：

<head>

    <style type="text/css">
        #fouc { display: none; }
    </style>

    <script type="text/javascript">
        document.documentElement.className = 'js';
    </script>

    <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
    <script src="js/jquery.min.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/skel-layers.min.js"></script>
    <script src="js/init.js"></script>

</head>

<body id="top">

    <div id="fouc">
            bunch of stuff to hide until style has loaded. 
    </div>

    <script type="text/javascript">
        document.getElementById("fouc").style.display="block";
    </script>

</body>

这没有用。谁能建议在这种情况下阻止 FOUC 的方法？

感谢您的耐心等待，感谢您的帮助，

Ĵ

4

1 回答 1

1

这是我的解决方案：

    <script src="js/jquery.min.js"></script>
    <script src="js/skel.min.js"></script>
    <script src="js/skel-layers.min.js"></script>
    <script src="js/init.js"></script>

     <style type="text/css">
       .no-fouc {display: none;}
     </style>

    <script type="text/javascript">
      document.documentElement.className = 'no-fouc';
     $(window).on("load", function() {
        $('.no-fouc').removeClass('no-fouc');
     });    
    </script>

整个事情都进入了 <head>，而 <body> 没有任何变化。

它不是在正文部分使用类和 id，而是使用 $(window).on("load", function() 仅在加载内容后才加载页面。请务必在脚本块 之前加载 jQuery。

于 2017-09-14T08:01:35.813 回答