如何消除無樣式內容的 Flash (FOUC)？
- 原創
- 2024-11-22 17:29:14851瀏覽
解決無樣式內容的Flash
網頁載入時出現不必要的無樣式內容是一個常見問題，稱為無樣式內容的Flash ( FOUC) )。這篇簡短的文章討論了這個問題及其解決方案。
使用 CSS 隱藏頁面元素並隨後使用 JavaScript 顯示它們的傳統方法是有問題的。它會損害停用 JavaScript 的使用者的網站可用性。
為了克服這個問題，建議在頁面載入後使用 JavaScript 隱藏和顯示元素。雖然 jQuery 提供了初步的解決方案，但它可能不夠及時，無法避免較大頁面的 FOUC。
更有效的技術是在頁面渲染之前用JavaScript 隱藏HTML 標籤，從而在腳本執行時快速隱藏:
<html>
<head>
...
<style>
.hidden { display: none; }
</style>
...
<script>
$('html').addClass('hidden');
$(window).on('load', function () {
$('html').removeClass('hidden');
});
</script>
</head>
<body>
...
</body>
</html>
在這種方法中，jQuery 的addClass() 函數在.on('load') 方法之外調用，確保隱藏HTML 標籤立即。
以上是如何消除無樣式內容的 Flash (FOUC)？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn