如何停止無風格內容的閃光

這只是一個簡短的問題，我沒有一個真正的例子，但我使用了一個定製的CMS，目前我們沒有訪問網頁的頭部，所以一些CSS必須放置在頭部之外，從而在頁面加載時導致無風格內容的閃爍。如何停止無風格內容的閃光

只是想知道，如果她的人都知道一個快速修復與jQuery或東西來阻止這一切。

我知道把CSS不在內聯是不好的做法，但我想知道是否有工作輪。

任何幫助表示讚賞

2012-07-24 Ashley Briscoe

的基本解決方案來處理FOUC是將它隱藏起來，直到它已經被正確的風格。

我假設你有超過所顯示無樣式內容控制？在這種情況下，將其包裝在<div id="some-div" style="display:none">... content ... </div>中。然後使用jQuery來顯示它當整個文件已準備就緒：

$(function() { $("#some-div").show(); });

來源

2012-07-24 22:33:16

那十分感謝，如果JS是diabled是否意味着用戶將看不到內容？ – 2012-07-24 22:35:22

是的，這是正確的。它需要JS才能工作。 – 2012-07-24 22:36:22

DOMContentLoaded事件不會等待樣式表下載，解析和應用。其次，瀏覽器不會將任何樣式應用於使用display：none隱藏的內容; – 2013-10-04 08:57:45

添加一類名爲no-fouc內容，設置類display: none中常見的CSS文件，然後刪除在頁面加載的類。這個解決方案的優點是它可以處理任意數量的元素，並且可以在所有頁面上重用。

$(function() { 
 
    $('.no-fouc').removeClass('no-fouc'); 
 
    $('#dialog').dialog(); 
 
});

.no-fouc { 
 
    display: none; 
 
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 

 
<div class="no-fouc"> 
 
    <div id="dialog" title="Basic dialog"> 
 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
 
    </div> 
 
</div>

來源

2017-11-21 15:37:43

如何停止無風格內容的閃光

回答

相關問題