93

Web ページでのスタイルなしコンテンツ (FOUC) のフラッシュを停止するにはどうすればよいですか?

4

13 に答える 13

87

cssスタイルを使用して最初に一部のページ要素を非表示にし、次にjavascriptを使用してページの読み込み後にスタイルを表示に戻す場合の問題は、javascriptを有効にしていないユーザーがそれらの要素を表示できないことです。したがって、それは優雅に劣化しないソリューションです。

したがって、より良い方法は、javascriptを使用して、ページの読み込み後にこれらの要素を最初に非表示にするだけでなく、再表示することです。jQueryを使用すると、次のようなことをしたくなるかもしれません。

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

ただし、ページが非常に大きく、要素が多い場合、このコードはすぐには適用されず（ドキュメントの本文はすぐに準備できません）、FOUCが表示される可能性があります。ただし、ドキュメントの準備が整う前であっても、スクリプトが頭にあるとすぐに非表示にできる要素が1つあります。それは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');
    $(document).ready(function() {    // EDIT: From Adam Zerner's comment below: Rather use load: $(window).on('load', function () {...});
      $('html').show();  // EDIT: Can also use $('html').removeClass('hidden'); 
     });  
   </script>
   </head>
   <body>
   <!-- Body Content -->
   </body>
</html>

jQueryのaddClass（）メソッドは、.ready（）（または、より適切には.on（'load'））メソッドの*外部*で呼び出されることに注意してください。

于 2012-03-22T13:41:30.173 に答える
17

現在のすべてのブラウザーで動作し、古いブラウザーでは何もしない、jQuery に依存しないソリューションには、head タグに次を含めます。

<head>
    ...

    <style type="text/css">
        .fouc-fix { display:none; }
    </style>
    <script type="text/javascript">
        try {
            var elm=document.getElementsByTagName("html")[0];
            var old=elm.class || "";
            elm.class=old+" fouc-fix";
            document.addEventListener("DOMContentLoaded",function(event) {
                elm.class=old;
                });
            }
        catch(thr) {
            }
    </script>
</head>

@justastudent のおかげで、設定を試しただけelm.style.display="none";で、少なくとも現在の Firefox Quantum では期待どおりに動作するようです。したがって、これはよりコンパクトなソリューションです。これまでのところ、私が見つけた中で最も簡単なものです。

<script type="text/javascript">
    var elm=document.getElementsByTagName("html")[0];
    elm.style.display="none";
    document.addEventListener("DOMContentLoaded",function(event) { elm.style.display="block"; });
</script>
于 2014-02-10T03:16:10.370 に答える
4

FOUCを回避するために私が行ったことは次のとおりです。

  • body セクションを次のように設定します。<body style="visibility: hidden;" onload="js_Load()">

  • js_Load()JavaScript 関数を作成します。document.body.style.visibility='visible';

このアプローチでは、ページ全体と CSS ファイルが読み込まれるまで、Web ページの本文は非表示のままになります。すべてが読み込まれると、onload イベントによって本文が表示されます。そのため、Web ブラウザは、すべてが画面に表示されるまで空のままです。

これは単純なソリューションですが、これまでのところ機能しています。

于 2011-05-12T19:23:10.270 に答える
1

実際のコード変更をまったく必要としない方法を思いつきました。私の問題は、いくつかのjavascriptファイルの後にいくつかのcssファイルをインポートすることに関連していました。

この問題を解決するために、CSS リンクを移動して、JavaScript インポートの上に配置しました。これにより、すべての CSS をインポートしてすぐに使用できるようになり、HTML が画面に表示されたときに、JS の準備ができていなくても、ページが適切にフォーマットされます。

于 2019-02-08T13:54:31.197 に答える
0

あなたはバニラでこれを試すことができます

function js_method(){
//todos
var elementDiv = document.getElementById("main");
elementDiv.style.display ="block";
}
<body onload="js_method()" id="main" style="display:none">
//todos
<h2>Hello</h2>
</body>

于 2019-11-06T09:16:02.777 に答える