jQueryのreadとJavaScript_jqueryのonload関数の違い

JavaScript では、onload 関数が最も頻繁に使用されており、JavaScript に関わるほとんどすべての人がこの関数に触れるはずです。この関数の機能は、Web ページが完全にロードされるのを待ってからコード ブロック内のステートメントを実行することです。これは通常、ドキュメント フローの実行順序に従ってヘッダーに JavaScript をロードするときに使用されるためです。

コードをコピーします コードは次のとおりです:

window.onload = function(){
// Web ページがロードされた後、ここでコード ブロックを実行します
};

jQuery にも対応する関数があり、コード ブロック
を実行する前に Web ページがロードされるのを待ちます。

コードをコピー コードは次のとおりです:

$(document).ready(function(){
// Web ページが読み込まれるときに、ここでコード ブロックを実行します。
});

上記の 2 つの関数は同じように見えますが、実際には大きく異なります。

onload は、DOM ツリーの作成後だけでなく、すべての外部リソースがロードされ、ページ全体がブラウザ ウィンドウに表示された後にも実行されます。これらのリソースには、画像リソースだけでなく、ページに埋め込まれた Flash ビデオも含まれます。画像や Flash が多すぎると、読み込みに時間がかかり、コード ブロックの実行の遅延により多くの時間が費やされます。

jQuery のready() メソッドは、ドキュメント構造が完全に解析され、ブラウザがコード ブロックを実行する前に HTML を DOM ツリーに変換するのを待つだけで済みます。ここでは、DOM と画像のみであることに注意してください。 Web ページ、フラッシュなど。外部ソースは関係ありません。

jQueryのready()メソッドを使うと待ち時間が短縮されることがわかります。

もちろん、すべてのスクリプトを タグの後に置くという別の方法もあります。この場合、Web ページはドキュメント フローの順序で実行され、JavaScript の onload の効果が適用されます。 jQueryのready()も実現され、このメソッドによりWebコンテンツの表示が高速化されます。