1

<body>JavaScript を有効にしていないユーザーが jQuery を表示できるようにしながら、jQueryでフェードインするためのかなり標準的な手法を使用しています。

CSSで、設定しました

body.has-js {
    display:none;
}

次に、セクション.has-jsに次の jQuery スニペットを追加します。<head>

<script>
   jQuery(document).ready(function($) {
       $("body").addClass("has-js");
   });

   window.onload = function() {
      jQuery("body").fadeIn(500);
   }
</script>

望ましい結果は、最初は Web サイトを非表示にし、すべてのコンテンツが読み込まれるとスムーズにフェードインすることです。

問題:どうやら、JavaScript が起動する前にコンテンツが読み込まれるため、.has-js クラスが追加される前にページがちらつきます。これは、Firefox を除くすべてのブラウザーで発生します。

質問: JavaScript を無効にしているユーザーにサイトを表示させたまま、ちらつきをなくすにはどうすればよいですか?

4

3 に答える 3

4

オープニングの直後にこれを入れてみてください<body>：

<script>
(function () {
    var elements = document.getElementsByTagName("body");
    var body = elements[0];
    body.className = "has-js";
})();
</script>

シナリオで DOM が読み込まれるのを待つ必要はありません。このスクリプトが読み込まれるときはいつでも、少なくともbody要素が利用可能であることが保証されます。

HTML で既にクラスが割り当てられている場合bodyは、最後の行を次のように置き換えます。

body.className += " has-js";
于 2013-05-31T13:03:57.097 に答える
3

そのように dom ready を使用する代わりに:

jQuery(document).ready(function($) {
    $("body").addClass("has-js");
});

そのようなことをしてください：

<head>
</head>
<body>
    <script>
        document.getElementsByTagName('body')[0].className = 'has-js';
    </script>
    <!-- Your content -->
</body>

そのように、body タグが作成されると、コンテンツを追加する前に彼のクラスがありました。

于 2013-05-31T13:08:16.240 に答える
2

これは、ドキュメントの準備ができたときに、スクリプトが has-js クラスを body に追加するためだと思います。だからタグ<script>$("body").addClass("has-js");</script>の直後に置く。<body>

于 2013-05-31T13:09:04.240 に答える