通过 javascript 调用 CSS 时防止 FOUC答案

【问题标题】：Preventing FOUC when calling CSS through a javascript通过 javascript 调用 CSS 时防止 FOUC
【发布时间】：2017-09-12 11:45:43
【问题描述】：

我有一个从模板更改的网页。我正遭受 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 的方法吗？

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

【问题讨论】：

这是一个真正的问题，如果人们要对我投反对票，他们至少可以评论原因。
我没有投反对票，但这里有一些随机的想法。大多数情况下，最好将脚本标签放在结束 </body> 标签和 css 之前，无论是内部的还是外部的，都会在 <head> 部分加载。你也在使用.js #fouc。我没有看到这有任何作用，因为您所说的是您正在寻找 fouc 的 id 在 js 类中，我在该 HTML 中的任何地方都看不到 class='js' 。所以只需在此处使用#fouc。
感谢您的帮助，我已经编辑了以上内容以匹配我的代码，但仍然无法正常工作

标签： javascript html css fouc

【解决方案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 before 脚本块。

【讨论】：