通过 javascript 调用 CSS 时防止 FOUC

Question

我有一个网页，是我根据模板更改的。我患有 FOUC（无样式内容的闪光）。

我已经从这里尝试了一个解决方案：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 的方法？

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

J

Answer 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>

整个内容都进入了，没有任何变化。

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

通过 javascript 调用 CSS 时防止 FOUC

Preventing FOUC when calling CSS through a javascript

javascript

html

css

fouc