使用$（document）.ready（）事件防止FOUC

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

感謝

傑森

來源

2017-09-13 Jason Rogers

檢查您的瀏覽器控制檯（並在下次再問這裏之前，謝謝）。它應該告訴你'''在這個時候不存在，因爲你只是嵌入了jQuery _after_腳本塊。 – CBroe

看起來這個問題有問題。你把你的風格放在你的文件底部（原因是爲了更快地顯示文本），然後你嘗試隱藏你的文本，直到css被加載......只需把你的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> 

<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-14 08:07:39

使用$（document）.ready（）事件防止FOUC

回答

相關問題