防止使用$(document).ready()事件来防止fouc

我正在尝试防止我的网站上的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秒的福克。

谢谢

jason

这是我的解决方案：

<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');

完成完成页面时，包括所有帧，对象和图像。

相关内容

最新更新

热门标签：