ネイティブ JS ではなく jQuery の Read() メソッドの詳細な説明-jsチュートリアル-php.cn

ネイティブ JS ではなく jQuery の Read() メソッドの詳細な説明

高洛峰

リリース： 2016-12-07 14:00:17

オリジナル

973 人が閲覧しました

jQuery 3.0 バージョンより前は、ready の古典的な使用法は、次のような匿名関数を使用することでした:

$(document).ready(function() {
 // Handler for .ready() called.
});

ログイン後にコピー

jQuery 3.0 ready() の変更点

jQuery 3.0 のリリース前は、次のメソッドがありました。呼び出されたreadyメソッド:

ドキュメント要素の操作: $(document).ready(handler);

空の要素の操作: $().ready(handler);

または直接(つまり、特定の要素ではなく) ) 操作: $(handler);

上記の名前付きバリアントはすべて機能的に同等です。どの要素であっても、DOM がロードされた後に、指定されたハンドラーが呼び出されます。つまり、ここでの DOM ロードの完了は、ドキュメント内の特定の要素 (img 要素など) がロードされたことを意味するものではありません。逆に、ここで意味するのは、DOM ツリー全体がロードされたということです。

jQuery 3.0 では、$(handler) を除くすべての Ready メソッドが非推奨になりました。

公式声明:

これは、セレクターが ready() に接続されていないためです。これは非効率であるだけでなく、ブラウザーエンジンがこのメソッドの動作について誤った想定を行う原因となります。

readyイベントとloadイベントの違い

readyイベントは、DOMがロードされ、要素に安全にアクセスできるときにトリガーされます。一方、load イベントは、DOM とすべてのリソースがロードされた後にトリガーされます。

次のようにロードイベントを使用できます:

$(window).on("load", function(){
 // Handler when all assets (including images) are loaded
});

ログイン後にコピー

この場合、DOM 構造に完全にアクセスできるようになるまで待つ必要があるだけでなく、すべての画像リソースが完全にアクセスされるまで待つ必要もあります。をロードして (ロード時間は画像ファイルのサイズによって異なります)、関数を実行します。

通常の DOM 操作にはロードイベントは必要ないかもしれませんが、たとえば、すべてのリソースがロードされる前に回転ローダースタイルを表示したい場合や、JS を使用して画像のサイズを計算したい場合は、これが必要になる可能性があります。良い選択。

jQuery.ready() は必要ない場合があります

ready メソッドは、すべての DOM 要素が安全に操作できる場合にのみコードが実行されるようにします。しかし、これは何を意味するのでしょうか？つまり、実行したい JS コードが HTML の特定のフラグメントに埋め込まれている場合、ブラウザは実行前に次の要素も読み込む必要があります。

次の例のように:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>.ready() tutorial</title>
 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script>
  $(function(){ // .ready() callback, is only executed when the DOM is fully loaded
  var length = $("p").length;
  // The following will log 1 to the console, as the paragraph exists.
  // This is the evidence that this method is only called when the
  // DOM is fully loaded
  console.log(length);
  });
 </script>
 </head>
 <body>
 <p>I&#39;m the content of this website</p>
 </body>
</html>

ログイン後にコピー

実行したいJavaScriptコードが本文の最後にある場合、それを操作しようとする可能性があるため、ready()メソッドを使用する必要はないかもしれません。ブラウザが JavaScript を解析し、アクセスされた DOM 要素がロードされたとき:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>.ready() tutorial</title>
 </head>
 <body>
 <p>I&#39;m the content of this website</p>
 <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
 <script>
  var length = $("p").length;
  // The following will log 1 to the console, as the paragraph exists.
  console.log(length);
 </script>
 </body>
</html>

ログイン後にコピー

ネイティブ JavaScript の ready() の置き換え

最新のブラウザと IE9 以降では、次のようにリッスンすることで、ready() と同じ機能を実現できます。 DOMContentLoaded イベント:

document.addEventListener("DOMContentLoaded", function(){
 // Handler when the DOM is fully loaded
});

ログイン後にコピー

ただし、イベントがすでに発行されている場合、コールバックは実行されないことに注意してください。コールバックが常に実行されるようにするために、jQuery はドキュメント参照の "readyState" プロパティをチェックし、プロパティ値が変更されて完了した場合はすぐにコールバック関数を実行します。

var callback = function(){
 // Handler when the DOM is fully loaded
};
 
if (
 document.readyState === "complete" ||
 (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
 callback();
} else {
 document.addEventListener("DOMContentLoaded", callback);
}

ログイン後にコピー

には、これを実装した domReady ライブラリが含まれています。解決。

古いバージョンの IE ブラウザ

IE8 以下のブラウザでは、onreadystatechange イベントを使用してドキュメントの readyState プロパティを監視できます:

document.attachEvent("onreadystatechange", function(){
 // check if the DOM is fully loaded
 if(document.readyState === "complete"){
 // remove the listener, to make sure it isn&#39;t fired in future
 document.detachEvent("onreadystatechange", arguments.callee);
 // The actual handler...
 }
});

ログイン後にコピー

または、jQuery などの Load イベントを使用することもできます。どのブラウザでも実行できます。これにより、すべてのアセットがロードされるまで待機するため、遅延も発生します。

このソリューションでは、前述のように、コールバックが常に実行できることを確認するために、readyState もチェックすることに注意してください。