ホームページ > 記事 > ウェブフロントエンド > ネイティブ JS ではなく jQuery の Read() メソッドの詳細な説明

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

高洛峰オリジナル: 2016-12-07 14:00:17953ブラウズ

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 もチェックすることに注意してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：AngularJS 圧縮 JS のヒントの分析次の記事：AngularJS 圧縮 JS のヒントの分析

続きを見る

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

関連記事