JavaScript を使用せずにスタイルのないコンテンツのフラッシュ (FOUC) を防ぐ方法

スタイルのないコンテンツのフラッシュの除去

スタイルのないコンテンツのフラッシュ (FOUC) とは、Web ページがそのスタイルで表示される短い瞬間を指します。 CSS スタイルが適用される前の生の HTML 要素。この不快な効果は、ユーザー エクスペリエンスに悪影響を与える可能性があります。

解決策: JavaScript を使用する

一般的な解決策では、最初に CSS を使用して要素を非表示にし、その後 JavaScript を使用して要素を再表示します。ページが読み込まれます。ただし、このアプローチは、JavaScript が無効になっているユーザーにとっては問題になる可能性があります。

より良いアプローチ: HTML 要素を非表示にする

個々の要素を非表示にする代わりに、より効果的なアプローチを使用します。 JavaScript を使用して HTML 要素全体を非表示にすることです。これは、

の HTML タグに隠しクラスを追加することで実現できます。セクション:

  
    <style type="text/css">
      .hidden { display: none; }
    </style>
    <!-- ... -->
  
  
    <!-- Body Content -->
  

JavaScript コードでは、ドキュメントの準備ができる前に addClass() メソッドを使用して HTML 要素を非表示にします:

$('html').addClass('hidden');

ページが読み込まれたら (またはドキュメントの準備ができている)、HTML 要素が表示されます:

$(document).ready(function() {
  $('html').removeClass('hidden');
});

HTML 要素を非表示にすると、そのすべての子要素も非表示になり、FOUC が防止されます。このアプローチを効果的に機能させるには、addClass() メソッドを .ready() 関数の外部で呼び出す必要があることに注意してください。

以上がJavaScript を使用せずにスタイルのないコンテンツのフラッシュ (FOUC) を防ぐ方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。