ホームページ >ウェブフロントエンド >CSSチュートリアル >JavaScript を使用せずにスタイルのないコンテンツのフラッシュ (FOUC) を防ぐ方法
JavaScript を使用せずにスタイルのないコンテンツのフラッシュ (FOUC) を防ぐ方法
- DDDオリジナル
- 2024-11-14 11:51:02203ブラウズ
スタイルのないコンテンツのフラッシュの除去
スタイルのないコンテンツのフラッシュ (FOUC) とは、Web ページがそのスタイルで表示される短い瞬間を指します。 CSS スタイルが適用される前の生の HTML 要素。この不快な効果は、ユーザー エクスペリエンスに悪影響を与える可能性があります。
解決策: JavaScript を使用する
一般的な解決策では、最初に CSS を使用して要素を非表示にし、その後 JavaScript を使用して要素を再表示します。ページが読み込まれます。ただし、このアプローチは、JavaScript が無効になっているユーザーにとっては問題になる可能性があります。
より良いアプローチ: HTML 要素を非表示にする
個々の要素を非表示にする代わりに、より効果的なアプローチを使用します。 JavaScript を使用して HTML 要素全体を非表示にすることです。これは、
の HTML タグに隠しクラスを追加することで実現できます。セクション:<html>
<head>
<style type="text/css">
.hidden { display: none; }
</style>
<!-- ... -->
</head>
<body>
<!-- Body Content -->
</body>
</html>
JavaScript コードでは、ドキュメントの準備ができる前に addClass() メソッドを使用して HTML 要素を非表示にします:
$('html').addClass('hidden');
ページが読み込まれたら (またはドキュメントの準備ができている)、HTML 要素が表示されます:
$(document).ready(function() {
$('html').removeClass('hidden');
});
HTML 要素を非表示にすると、そのすべての子要素も非表示になり、FOUC が防止されます。このアプローチを効果的に機能させるには、addClass() メソッドを .ready() 関数の外部で呼び出す必要があることに注意してください。
以上がJavaScript を使用せずにスタイルのないコンテンツのフラッシュ (FOUC) を防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。