如何更有效地消除無樣式內容的 Flash (FOUC)？
- Linda Hamilton原創
- 2024-11-13 17:33:02199瀏覽
消除無樣式內容的Flash
當網頁在瀏覽器應用之前短暫顯示無樣式時，就會出現無樣式內容的Flash (FOUC) CSS 樣式表。本文探討了一種更有效的防止FOUC 的方法，即使用JavaScript 最初隱藏然後取消隱藏頁面元素：
使用JavaScript 隱藏和取消隱藏
最初隱藏頁面元素CSS 然後使用JavaScript 取消隱藏可能會導致禁用JavaScript 的使用者出現可訪問性問題。更好的解決方案是使用 JavaScript 進行隱藏和取消隱藏。
jQuery 範例
使用jQuery 的一種可能方法：
$(document).ready(function() {
$('body').hide();
$(window).on('load', function() {
$('body').show();
});
});
但是，此方法依賴於文件正文在隱藏之前已準備好正文好，這仍然可能導致一些問題FOUC.
最佳化方法：隱藏HTML標籤
另一種策略是在head 中遇到腳本時，甚至在之前，使用JavaScript 立即隱藏HTML 標籤文件已準備就緒：
<html>
<head>
<!-- Other stuff like title and meta tags go here -->
<style type="text/css">
.hidden {display:none;}
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$('html').addClass('hidden');
$(window).on('load', function () {
$('html').show();
});
</script>
</head>
<body>
<!-- Body Content -->
</body>
</html>
在此範例中，在.load() 之外呼叫jQuery addClass() 方法立即隱藏HTML 標籤的函數。
以上是如何更有效地消除無樣式內容的 Flash (FOUC)？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn