1

これは私のready取り扱いです： 

$(document).ready(function() {
     $(document).hide();

     $('.foo').each(function(elem, i) {
          $(elem).text('So long and thanks for all the fish');
     });     

     $(document).show();
}};

私がやろうとしているのは、すべての準備が整うまでドキュメントを完全に非表示にすることですが、show()関数は要素の反復を待たないようです。

ところで、show()andhide()をcss('display', 'hide')andに変えてみましcss('display', 'block')たが、それでも目に見える文字が変わっています。

show() を呼び出す前に、すべてのコードが実行されたことをどのように確認しますか?

4

2 に答える 2

4

本文またはコンテナ要素を非表示にすることでこれを修正するとします。それはうまくいきません。その理由は次のとおりです。

ドキュメントが (ほとんど) ロードされた後、ドキュメントを非表示にする前に何が起こるでしょうか?

そうです、最善を尽くしてもその間にドキュメントが表示される場合があります。

body代わりにできることは、JavaScript の介入なしで、たとえば を非表示にする CSS クラスを使用することです。例えば：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
        body.hide { display: none; }
    </style>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        $(document).ready( function() {
            $('.foo').each(function( i, elem ) {
                $(elem).text( 'So long and thanks for all the fish' );
            });
            $('body').removeClass( 'hide' );
        });
    </script>
</head>
<body class="hide">
    <div class="foo"></div>
</body>
</html>

もちろんこれは、JavaScript が無効になっている場合、ドキュメントがまったく表示されないことを意味します。JavaScript 以外のフォールバックが必要な場合はどうすればよいでしょうか? その場合、代わりにこのようにすることができます。htmlの代わりに要素を非表示にします。bodyこれは、コードが で機能することがわかっているためですhead(body要素はこの時点ではまだ存在しない可能性があります)。JavaScript が有効になっている場合にのみ非表示にします。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
        html.hide { display: none; }
    </style>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        $('html').addClass( 'hide' );
        $(document).ready( function() {
            $('.foo').each(function( i, elem ) {
                $(elem).text( 'So long and thanks for all the fish' );
            });
            $('html').removeClass( 'hide' );
        });
    </script>
</head>
<body>
    <div class="foo">
        This content is displayed if JavaScript is disabled.
    </div>
</body>
</html>

hideこれで JavaScript 以外のフォールバックができましたが、クラスを追加するコードのために、JavaScript が有効になるとドキュメントはすぐに非表示になります。

また、コールバックでパラメーターが逆になっていることに注意してください$().each()。(興味深いことに、使用した順序はより理にかなっており、実際に新しいネイティブ.forEach()関数で使用されている順序です。順序$().each()は実際には逆になっています。当時は良いアイデアのように見えましたが、実際には単なる間違いでした。 .)

于 2013-05-19T04:55:39.677 に答える
3

できませんhide()。document代わりに、ページのメイン コンテナ要素を非表示にしてみてください。またはbodyegを非表示$('body').hide()にすることもできます。

余談ですが、displayプロパティは である必要がありますnone。hideは有効な値ではありません。

于 2013-05-19T04:46:31.380 に答える