-1

我试图在我的网站上阻止 FOUC。到目前为止，这是我的代码：

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

    <noscript>
        <link rel="stylesheet" href="css/skel.css" />
        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/style-xlarge.css" />
    </noscript>

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

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


</head>

我在哪里错了？我仍然得到大约 1-2 秒的 FOUC。

谢谢

杰森

4

1 回答 1

1

这是我的解决方案：

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

<noscript>
    <link rel="stylesheet" href="css/skel.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style-xlarge.css" />
</noscript>

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

而不是使用：

     $(document).ready(function() {

我用了：

    $(window).on("load", function() {

执行：

    $('.no-fouc').removeClass('no-fouc');

当整个页面完全加载时，包括所有框架、对象和图像。

于 2017-09-14T08:07:39.153 回答