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

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

Susan Sarandon

リリース： 2024-12-08 05:31:10

オリジナル

531 人が閲覧しました

How to Eliminate Flash of Unstyled Content (FOUC)?

スタイルのないコンテンツのフラッシュを回避する戦略

スタイルのないコンテンツ (FOUC) の存在は、Web ページでのユーザーエクスペリエンスを混乱させる可能性があります。この記事では、FOUC を排除するためのアプローチについて詳しく説明します。

JavaScript を使用した即時要素の非表示

最初に CSS を使用して要素を非表示にし、その後 JavaScript を使用して再表示することは、JavaScript を無効にするユーザーにとって問題となります。より包括的なアプローチには、JavaScript を使用してページの読み込み後に要素を非表示にしたり再表示したりすることが含まれます。

jQuery を使用すると、次のように body 要素を非表示にすることを検討できます。

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

ログイン後にコピー

ただし、この方法では、ページに多数の要素が含まれている場合でも、FOUC が発生します。したがって、ドキュメントが完全にロードされる前に HTML タグを非表示にすることを検討してください。

<html>
  <head>
    <!-- Head content -->
    <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').removeClass('hidden');  
     });  
   </script>
   </head>
   <body>
   <!-- Body Content -->
   </body>
</html>

ログイン後にコピー

要素を即座に非表示にするために、addClass() メソッドは .ready() メソッドの外で実行されることに注意してください。

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