web-dev-qa-db-ja.com

スタイル付けされていないコンテンツのフラッシュを排除

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

cssfouc
65
CMS Critic

FOUCを避けるために私がしたことは：

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

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

この方法では、ページ全体とCSSファイルがロードされるまで、Webページの本文は非表示のままになります。すべてがロードされると、onloadイベントによりボディが表示されます。そのため、Webブラウザーは、画面にすべてが表示されるまで空のままです。

これは簡単な解決策ですが、今のところ機能しています。

6
Álvaro Durán

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'））メソッドの* outside *と呼ばれることに注意してください。

77
Stefan

CSSのみのソリューション：

<html>
  <head>
    <style>
      html {
        display: none;
      }
    </style>
    ...
  </head>
  <body>
    ...
    <link rel="stylesheet" href="app.css"> <!-- should set html { display: block; } -->
  </body>
</html>

ブラウザがHTMLファイルを解析するとき：

  • 最初に行うことは、<html>を非表示にすることです。
  • 最後に行うことは、スタイルをロードし、スタイルが適用されたすべてのコンテンツを表示することです。

JavaScriptを使用するソリューションに対するこれの利点は、ユーザーがJavaScriptを無効にしている場合でも機能することです。

注：<link>の内部に<body>を置くことは 許可 です。ただし、一般的な慣行に違反するため、私はそれを欠点と見ています。 <link>にあるような defer 属性が<script>にある場合、それは<head>まだ目標を達成しています。

20
Adam Zerner

JQueryに依存しないソリューションは、現在のすべてのブラウザーで動作し、古いブラウザーでは何も実行しません。ヘッドタグには次を含めます。

<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>
18
Lawrence Dol

これは私のために働いており、javascriptを必要とせず、多くの要素と多くのCSSを含むページに最適です：

まず、専用の<STYLE>の設定<HTML>タグの可視性が「非表示」で、不透明度が「0」のHTMLの上部、たとえば<HEAD>要素、たとえば、HTMLの上部にあるadd：

<!doctype html>
<html>
<head>
    <style>html{visibility: hidden;opacity:0;}</style>

次に、最後の.cssスタイルシートファイルの最後で、可視性と不透明度のスタイルをそれぞれ「visible」と「1」に設定します。

html {
    visibility: visible;
    opacity: 1;
}

「html」タグの既存のスタイルブロックが既にある場合は、「html」スタイル全体を最後の.cssファイルの最後に移動し、上記のように「visibility」および「opacity」タグを追加します。

https://Gist.github.com/electrotype/7960ddcc44bc4aea07a35603d1c41cb

14
Jeff

Firefox Quantumでも機能するその他の簡単な修正は、<script>内の空の<head>タグです。ただし、これはページ速度の洞察と全体的な読み込み時間にペナルティを科します。

私は100％成功しました。私はそれが主な理由であると思います、なぜ作業中の他のJSとの上記の解決策。

<script type="text/javascript">

</script>
7
Paul Cream

CSS @importについて誰も話していない

それが私にとっての問題でした。2つの追加スタイルシートを@importでCSSファイルに直接ロードしていました

簡単な解決策：すべての@importリンクを<link />に置き換えます

4
danidee

本当のコードの変更を一切必要としない方法を思いついた、うーん！私の問題は、いくつかのJavaScriptファイルの後にいくつかのcssファイルをインポートすることに関連していました。

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

1
Jake Boomgaarden

ここに私のコードがあります..それがあなたの問題を解決することを願っています

set <body style="opacity:0; >

<script>
    $(document).ready(function() {
        $("body").css('opacity', 1);
    });
</script>
0
Coding_snakeZ