jquery $(document).ready() と window.onload の違い-jsチュートリアル-php.cn

Jquery の $(document).ready() の関数は、従来の JavaScript の window.onload メソッドに似ていますが、やはり window.onload メソッドとは異なります。

1. 実行時間

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

2.编写个数不同

window.onload は同時に複数を写すことができません、場合によっては複数の window.onload メソッド、ただ会执行一个
$(document).ready() 同時に複数を写すことができます、そしてすべて実行可能です

3. 簡単な書き方

window.onload を簡単に書く方法はありません
$(document).ready(function(){}) は $(function(){}) と省略できます;

私の場合、以前の開発では通常 JavaScript を使用し、ほとんどの場合、最初の行は次のとおりです。

コードは次のとおりです。 ).ready(function(){

...

});

現時点では、一部のメソッドを実行する前に、すべての js と画像がロードされるのを待つ必要はありません。一部のメソッドでは、たとえば、一部の画像やその他の要素がロードされていないため、この時点で予期しない状況が発生します。使用する必要があります:

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

$(window).load(function() {

$("#btn-upload").click(function(){ //例:

UploadPhotos ();

});

以下は転載内容です
body.onload() の代わりに $(window).load(function(){...}) を使用するいくつかの理由
まず第一に、それらはページ上のすべての要素 (
html タグ
と

quote

すべての写真、Flash、その他のメディアの取得) がロード後に実行されるという共通点があります。

No body.Onload( ) 理由 1:複数の関数を同時にロードしたい場合は、次のように記述する必要があります $(window).load() を使用すると、次のように複数の関数をロードできます

コード次のように:

$(window).load(function() {

alter("hello, this is jQuery!");

}); 私も jQuery を使用しています");

});

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

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

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

さらに、$(window).load(function(){...} にも同じ問題が存在します。 ) と body.onload() 問題の 1 つは、最初に述べたように、実行前にページのすべてのコンテンツがロードされるまで待機する必要があることです。ただし、ネットワーク速度が比較的遅い場合は、多くの場合時間がかかります。ページを読み込むまでの時間 (数秒から 10 秒以上)、ページが完全に読み込まれておらず、ユーザーがすでにページを操作している状況によく遭遇します。ページの効果は私たちが期待していたものと異なります。それでは、ここでは $(document).ready(function(){})、または $(function(){}) を使用することをお勧めします。ページの DOM 要素がロードされた後に実行されます

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

ただし、実行したい関数を実行する前に、ページ上のすべてがロードされるまで待つ必要がある場合があります。 $(window).load(function (){...}) を使用する時が来ましたか? それとも $(function(){}) を使用するべきでしょうか? 多くの場合、特定のニーズに基づいて異なる選択をする必要があります。

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

コードは次のとおりです。 l & lt; script type = "text/javascript" & gt; (「dom はまだロードしていません!);

}

& lt;/script & gt;

はは、こういうニーズも時々あります!

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

Window.load $(document).ready()
実行タイミング実行する前に、Web ページ内のすべてのコンテンツ (画像を含む) がロードされるまで待つ必要があります。 Web ページ内のすべての DOM 構造がロードされた後に実行されます。描画され、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 
});

ログイン後にコピー

なお、$(ドキュメントにイベントが登録されているので注意してください。 ).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 );

ログイン後にコピー

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

以上がjquery $(document).ready() と window.onload の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。