BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] jQueryのdocument.ready関数はいつ使うべきですか？

2022-11-05 06:53:14

質問

Javascript/jQueryを使い始めた頃、document.readyを使うように言われましたが、その理由をよく知りませんでした。

いつjavascript/jqueryのコードをjQueryの document.ready ?

興味のあるトピックをいくつか。

  1. jQuery の .on() というメソッドを を使っています。 .on() メソッドを使用しています (通常は動的に作成される DOM 要素で)。この場合 .on() クリックハンドラ 常に する 内部 document.ready ?
  2. パフォーマンス 様々なjavascript/jQueryオブジェクトを保持することは、よりパフォーマンス的に優れているのでしょうか？ 内部 それとも 外側 document.ready (また、パフォーマンスの違いは大きいですか？)?
  3. オブジェクトのスコープ。AJAX でロードされたページでは、オブジェクトが の中にある にあるオブジェクトにはアクセスできませんよね？それらは 外 document.ready の外側にあるオブジェクト（つまり、本当に "global" オブジェクト）にしかアクセスできないのですか？

更新しました。 ベストプラクティスに従うために、私のすべてのjavascript（jQueryライブラリと私のアプリのコード）は、以下の場所にあります。 の下にあります。 にあり、HTMLページの defer 属性を使用して、AJAXで読み込まれたページのjQueryを含むスクリプトにアクセスし、これらのページでjQueryライブラリにアクセスできるようにしています。

どのように解決するのですか？

簡単に言うと

$(document).ready は document が が準備できたときに発生するイベントです。

jQueryのコードを head セクションに配置し dom 要素 (アンカー、img など) にアクセスしようとしても、アクセスできません。 html は上から下へと解釈され、jQueryのコードが実行されるときにはhtml要素は存在しないからです。

この問題を解決するために、すべてのjQuery/javascriptコード（DOMを使用する）を $(document).ready 関数内に配置し、すべての dom 要素にアクセスできるようになったときに呼び出される関数です。

そしてこれが、jQueryのコードを一番下（すべてのdom要素の後、の直前）に配置したときの理由です。 </body> ) , は必要ありません。 $(document).ready

を配置する必要はありません。 on メソッドの中に $(document).ready を使用した場合のみ on メソッドを document というのは、上で説明したのと同じ理由です。 

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

EDIT

コメントより

  1. $(document).ready は、画像やスクリプトを待ちません。これが $(document).ready と $(document).load

  2. DOMにアクセスするコードだけがready handlerにあるべきです。プラグインであれば、readyイベントにはないはずです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します