Question

我有一个网页，我已从模板中更改过。我患有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吗？

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

Ĵ

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>

这一切都进入了＆lt; head＆gt;没有更改＆lt; body＆gt;。

而不是在body部分中使用类和id，使用$（window）.on（“load”，function（）仅在加载内容时加载页面。确保先加载jQuery 脚本块。

通过javascript调用CSS时防止FOUC

1 个答案: