スタイルのないコンテンツのフラッシュ (FOUC) を排除するにはどうすればよいですか?

スタイルのないコンテンツのフラッシュへの取り組み

Web ページの読み込み中にスタイルのないコンテンツが望ましくなく表示されるのは、スタイルのないコンテンツのフラッシュ (FOUC) として知られる一般的な問題です。 )。この短い記事では、この問題とその解決策について説明します。

CSS でページ要素を隠し、その後 JavaScript で表示するという従来のアプローチには問題があります。 JavaScript が無効になっているユーザーにとって、Web サイトの使いやすさが損なわれます。

これを克服するには、JavaScript を使用して、ページの読み込み後に要素を非表示にしたり表示したりすることをお勧めします。 jQuery は初期の解決策を提供しますが、大きなページの FOUC を回避するには十分な速さではない可能性があります。

より効果的な手法は、ページがレンダリングされる前に JavaScript で HTML タグを非表示にし、スクリプトの実行時に迅速に隠蔽できるようにすることです。 :

  
    ...
    <style>
      .hidden { display: none; }
    </style>
    ...
    <script>
      $('html').addClass('hidden');
      $(window).on('load', function () {
        $('html').removeClass('hidden');
      });
    </script>
  
  
    ...
  

このアプローチでは、jQuery の addClass() 関数が .on('load') メソッドの外側で呼び出され、 HTML タグがすぐに非表示になることを確認します。

以上がスタイルのないコンテンツのフラッシュ (FOUC) を排除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。