消除無樣式內容的閃爍：一種優雅的降級方法
當網頁元素短暫出現時，會發生無樣式內容的閃爍（FOUC）在JavaScript 啟動應用這些樣式之前，沒有它們想要的樣式。為了防止這種難看的效果，我們將探索一種解決方案，可以在不影響禁用 JavaScript 的使用者功能的情況下優雅地降級。
使用JavaScript 而不是CSS 隱藏元素
最初使用CSS 隱藏元素，然後使用JavaScript 顯示它們是有問題的，因為未啟用JavaScript 的用戶將永遠不會會看到這些元素。更好的方法是使用 JavaScript 來隱藏和顯示元素。
用於隱藏和顯示頁面內容的jQuery
使用jQuery，我們可以有效地隱藏頁面內容：
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});透過HTML隱藏最佳化顯示
但是，對於大頁面，上述程式碼可能無法封鎖 FOUC。因此，一旦頭部遇到JavaScript，我們就可以隱藏HTML 元素：
<html>
<head>
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript">
$('html').addClass('hidden');
$(window).on('load', function() {
$('html').removeClass('hidden');
});
</script>
</head>
<body>
<!-- Body Content -->
</body>
</html>請注意，jQuery addClass() 方法是在$(window).on('load') 外部呼叫的回調以立即隱藏HTML 元素。
此方法透過確保頁面內容最初隱藏並在頁面完全加載後顯示，從而確保優雅降級，即使對於未啟用 JavaScript 的用戶也是如此。
以上是如何透過優雅降級消除無樣式內容的 Flash？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
