jquery $(document).ready() と window.onload_jquery の違い

1. 実行時間

window.onload は、画像を含むページ内のすべての要素が読み込まれるまで、実行する前に待つ必要があります。
$(document).ready() は、DOM 構造が描画された後、ロードされるまで待つことなく実行されます。

2.書き込み回数が異なります

Window.onload は同時に複数のメソッドを書き込むことはできません。Window.Onload メソッドが複数ある場合、
は 1 つだけです。 $(document).ready() は同時に複数記述でき、すべて実行可能

3. 簡略化された書き方

window.onload
には簡略化された記述方法はありません。 $(document).ready(function(){}) は $(function(){});

と省略できます。

以前の開発では、通常 JavaScript を使用し、常に jquery モードを使用していました。つまり、最初の行は

です。

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

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

現時点では、一部のメソッドを実行する前に、すべての js と画像がロードされるのを待つ必要はありませんが、場合によっては、すべての js と画像がロードされるまで待つ必要があります

すべての要素がロードされると、一部のメソッドが実行されます。たとえば、この時点で一部のボタンをクリックすると、予期しない状況が発生します。

使用する必要があるもの:

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

$(window).load(function() {
$("#btn-upload").click(function(){ //例:
アップロード写真();
});
});

以下は転載内容です、

body.onload()
の代わりに $(window).load(function(){...}) を使用するいくつかの理由 まず、ページのすべての要素 (HTML タグとすべての参照画像、Flash およびその他のメディアを含む) が読み込まれた後に実行されます。これが共通点です。
body.Onload() を使用しない理由 1:

複数の関数を同時にロードしたい場合は、次のように記述する必要があります

ed5cb0397b63c7a89b89c225a7d5c20b36cc49f0c466276486e50c850b7e4956 $(window).load() を使用すると、次のように複数の関数をロードできます。

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

$(window).load(function() {

alert("こんにちは、jQuery です!");
});
$(window).load(function() {
alert("こんにちは、私も jQuery");
});

このように書くと、これら 2 つの関数が上から下に実行され、見た目がさらに良くなります。

body.Onload() を使用しない理由 2:

body.Onload() を使用すると、js と html を完全に分離できません。これは非常に深刻な問題です。

さらに、$(window).load(function(){...}) と body.onload() を使用すると、同じ問題が発生します。最初に述べたように、両方ともコンテンツがすべて完了するまで待つ必要があるからです。のページが利用可能です

読み込み完了後に実行されますが、ネットワーク速度が比較的遅い場合、ページの読み込みに時間がかかることがよくあります(数秒から10秒以上、あるいはそれ以上…)。だから私たちはよく

ページが完全に読み込まれておらず、ユーザーがすでにページを操作している状況も考えられます。そのため、ページの効果は予想とは異なります。

そこで、ここでは、$(document).ready(function(){})、または $(function(){}) と略記することをお勧めします。これは、ページの DOM 要素が読み込まれた後に実行されるためです。

画像やその他のメディアがダウンロードされるのを待つ必要はありません。

しかし、実行したい関数を実行する前に、ページ上のすべてがロードされるまで待つ必要がある場合もあるので、$(window).load(function(){...}) または

を使用する必要がありますか?

$(function(){}) の使用には、特定のニーズに基づいて異なる選択が必要になることがよくあります。

最後に、すべての DOM 要素が読み込まれる前に実行される jQuery コードを添付します

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

055d9d5ff16d85d950bd3dee4f983fb7
(関数() {
alert("DOM がまだロードされていません!");
})(jQuery)
2cacc6d41bbb37262a98f745aa00fbf0

はは、私たちにも時々このようなニーズがあるのです!

ドキュメントを読み込むブラウザを例に挙げます。ページが読み込まれた後、ブラウザは Javascript を通じて DOM 要素にイベントを追加します。通常の Javascript コードでは通常 window.onload メソッドが使用されますが、Jquery では $(document).ready() メソッドが使用されます。 $(document).ready() メソッドはイベント モジュールの最も重要な関数であり、Web アプリケーションの速度を大幅に向上させることができます。

window.load $(document).ready()
実行のタイミング: 実行前に、Web ページ内のすべてのコンテンツ (画像を含む) がロードされるまで待つ必要があります。DOM 要素に関連付けられたコンテンツがロードされていない可能性があります。
書き込み項目数 同時に複数の
を書き込むことはできません 次のコードは正しく実行されません:

window.onload = function(){ 
  alert(“text1”); 
}; 
window.onload = function(){ 
  alert(“text2”); 
}; 

2 番目の結果のみが出力されます。複数の
を同時に書き込むことができます。 次のコードは正しく実行されます:

$(document).ready(function(){ 
  alert(“Hello World”); 
}); 
$(document).ready(function(){ 
  alert(“Hello again”); 
}); 

結果が 2 回出力されます
簡略化された記述 なし

 $(function(){ 
  // do something 
}); 

また、$(document).ready() メソッドに登録されたイベントは DOM の準備ができている限り実行されるため、この時点では要素の関連ファイルがダウンロードされない可能性があることに注意してください。 。たとえば、画像に関連する HTML はダウンロードされ、DOM ツリーに解析されていますが、画像はまだロードされていない可能性が高いため、この時点では画像の高さや幅などの属性が有効ではない可能性があります。時間。この問題を解決するには、Jquery の別のページ読み込みメソッド、load() メソッドを使用します。 Load() メソッドは、ハンドラー関数を要素の onload イベントにバインドします。ハンドラー関数がウィンドウ オブジェクトにバインドされている場合、ハンドラー関数はすべてのコンテンツ (ウィンドウ、フレーム、オブジェクト、画像などを含む) がロードされた後にトリガーされます。ハンドラー関数が要素にバインドされている場合は、要素のコンテンツがロードされます。
JQuery コードは次のとおりです:
$(window).load(function (){
//コードを書きます
}); JavaScript の次のコードと同等
Window.onload = function (){
//コードを書きます
}

————————————————————————————

最近、フレームに埋め込まれたページを変更したとき、効果として jquery を使用しましたが、ページ自体も onload イベントにバインドされました。修正後、テストは Firefox では正常にスムーズに実行されますが、IE では jquery 効果が表示されるまでに 10 秒以上かかり、ニッコウキスゲは寒いです。

最初は、onload メソッドと競合しているのではないかと思いました。インターネットでは、$(document).ready() はページの DOM 解析が完了した後に実行され、onload イベントはすべてのリソースが準備された後に実行される、つまり $(document).ready() が実行されるとよく​​言われます。ページの DOM 解析が完了した後、onload 前に実行されます。特にページのピクチャが大きくなるほど、時間差が大きくなる可能性があります。しかし、私のページでは、画像は10秒以上表示されていますが、jquery効果はまだ表示されていません。

onload ローディング メソッドを削除してみますが、結果は同じです。元の onload イベント バインディングを記述するために $(document).ready() を使用する必要はないようです。では、Firefox は動作するのに IE は動作する理由は何でしょうか?その後デバッグを行ったところ、IE では元々バインドされていた onload メソッドが $(document).ready() のコンテンツの前に実行されるのに対し、Firefox では $(document).ready() のコンテンツが最初に実行されてから、元の onload メソッドが実行されることがわかりました。方法。 。これはネット上で言われていることと完全に一致しているわけではないようですが、興味深いですね。

jquery のソース コードを調べて、$(document).ready() がどのように実装されているかを確認します。

if ( jQuery.browser.msie && window == top ) (function(){ 
if (jQuery.isReady) return; 
try { 
document.documentElement.doScroll("left"); 
} catch( error ) { 
　　　　　　setTimeout( arguments.callee, 0 ); 
　　　　　　 return; 
　　　　} 
　　 // and execute any waiting functions 
　　　jQuery.ready(); 
})(); 
jQuery.event.add( window, "load", jQuery.ready ); 

結果は非常に明らかです。ページがフレームに埋め込まれていない場合に限り、IE は Firefox と同様に、最初に $(document).ready() のコンテンツを実行し、次に元の onload メソッドを実行します。フレームに埋め込まれたページの場合は、load イベントにバインドされて実行されるだけなので、当然、元の onload バインド メソッドが実行された後の順番になります。そして、このページにはテスト環境ではアクセスできないリソースがたまたまあり、10 秒以上の遅延はまさにそれが増幅する時間差です。