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

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

Linda Hamilton

リリース： 2024-11-13 17:33:02

オリジナル

199 人が閲覧しました

How to Eliminate Flash of Unstyled Content (FOUC) in a More Effective Way?

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

スタイルのないコンテンツのフラッシュ (FOUC) は、ブラウザが適用される前に Web ページが一時的にスタイルなしで表示されるときに発生します。 CSS スタイルシート。この記事では、JavaScript を使用してページ要素を最初に非表示にしてから再表示する、FOUC を防ぐためのより効果的なアプローチについて説明します。

JavaScript を使用した非表示と再表示

最初にページ要素を非表示にするCSS を使用してから JavaScript で再表示すると、JavaScript が無効になっているユーザーにとってアクセシビリティの問題が発生する可能性があります。より良い解決策は、非表示と再表示の両方に JavaScript を使用することです。

jQuery を使用した例

jQuery を使用した 1 つの可能なアプローチ:

$(document).ready(function() {
    $('body').hide();
    $(window).on('load', function() {
        $('body').show();
    });
});

ログイン後にコピー

ただし、この方法は、ドキュメント本体を非表示にする前に準備ができていることに依存しており、FOUC が発生する可能性があります。

最適化されたアプローチ: HTML タグを非表示にする

代替戦略これは、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>

ログイン後にコピー

この例では、jQuery addClass() メソッドがの外部で呼び出されます。 load() 関数を使用して、HTML タグをすぐに非表示にします。

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