スタイルのないコンテンツのフラッシュ (FOUC) を排除するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

php.cn

Nov 22, 2024 pm 05:29 PM

How to Eliminate the Flash of Unstyled Content (FOUC)?

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

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

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

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

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

&lt;html&gt;
  &lt;head&gt;
    ...
    &lt;style&gt;
      .hidden { display: none; }
    &lt;/style&gt;
    ...
    &lt;script&gt;
      $('html').addClass('hidden');
      $(window).on('load', function () {
        $('html').removeClass('hidden');
      });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    ...
  &lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。