jQueryのreadyイベントとloadイベント

jQueryのreadyイベントとloadイベント(MOOC.comより)

jQueryにはドキュメントをロードするための3つのメソッドがあります

$(document).ready(function() { // ...code... }) // ドキュメントの準備ができました略語 $(function() { // ...code... }) $(document).load(function() { // ...code... })

1 つは準備ができており、もう 1 つは準備完了です負荷、この2つの違いは何ですか?

ready とload のどちらが最初に実行されますか:
面接プロセス中に、よく質問されます:ready とload のどちらが最初に実行され、どちらが最後に実行されますか?答えは、ready が最初に実行され、load が後で実行されるということです。

DOM ドキュメントの読み込み手順:
なぜ ready が最初に実行され、load が後で実行されるのかを理解するには、まず DOM ドキュメントの読み込み手順を理解する必要があります:

(1) HTML 構造を解析します。 (2) 外部スクリプトとスタイルシートファイルを読み込みます。 (3) スクリプトコードを解析して実行します。 (4) HTML DOM モデルを構築します。 //ready (5) 画像などの外部ファイルを読み込みます。 (6) ページがロードされます。 //load

上記の説明で、ready は手順 (4) が完了した後に実行されますが、load は手順 (6) が完了するまで実行されないことが理解できたと思います。

結論:

readyとloadの違いはリソースファイルのロードにあり、readyは基本的なDOM構造を構築するため、コードのロードは速いほど良いです。高速ブラウジングの時代では、誰も答えを待ちたくありません。 Web サイトのページの読み込みに 4 秒以上かかると、ユーザーの 4 分の 1 が失われることになるため、フレームワークではユーザー エクスペリエンスが非常に重要です。DOM を処理するのは早ければ早いほど良いのです。画像の場合は、すべてのリソースが読み込まれた後にのみフレームの読み込みを処理します。画像リソースが多すぎる場合、読み込みイベントは長時間トリガーされません。

jQuery がドキュメントの読み込みタイミングをどのように処理するかを見てみましょう:

jQuery.ready.PROmise = function( obj ) { if ( !readyList ) { readyList = jQuery.Deferred() if ( document.readyState === "; complete" ) { // 非同期的に処理して、スクリプトに遅延の機会を与えますready setTimeout( jQuery.ready ); } else { document.addEventListener( "DOMContentLoaded",, false ); window.addEventListener ("load", completed , false );
jQuery 互換性のための具体的な戦略をご覧ください: 高度なブラウザーの場合、現時点では DOMContentLoaded イベントを喜んで使用し、時間と労力を節約します。

では、古い IE はどうすればよいのでしょうか?

引き続き jQuery ソリューションを見てみましょう:

// onload の前に確実に起動します。遅いかもしれませんが、iframe でも安全です document.attachEvent( "onreadystatechange", completed ); // window.onload へのフォールバック。これは常に機能します。 window.attachEvent( "onload", completed ); // IE でフレームではない場合 // ドキュメントの準備ができているかどうかを継続的に確認します var top = false; try { top = window.frameElement == null && document.documentElement; } catch (e) {} if ( top && top.doScroll ) { (function doScrollCheck() { ) if (!jQuery.isReady) { try { // Diego Perini によるトリックを使用します // http://javascript.nwbox .com/ / detach(); // 待機中の関数を実行します jQuery.ready(); } })(); }

ブラウザーに document.onreadystatechange イベントがある場合、イベントがトリガーされた場合。 readyState=complete の場合、DOM ツリーはロードされていると見なされます。ただし、このイベントはあまり信頼性がありません。たとえば、ページに画像がある場合、onload イベントの後にトリガーされる可能性があります。つまり、ページにバイナリ リソースが含まれていない場合、またはバイナリ リソースがほとんど含まれていない場合にのみ正しく実行されます。バックアップとしてキャッシュされます。

IEの読み込み検出

Diego Perini は、doScroll メソッド呼び出しを使用して、IE がロードされているかどうかを検出する方法を 2007 年に報告しました。詳細については、http://Javascript.nwbox.com/IEContentLoaded/ を参照してください。
原則として、IE が非 iframe にあるときは、doScroll を実行できるかどうかによって DOM が読み込まれているかどうかを継続的に判断することしかできません。上記の間隔で 50 ミリ秒ごとに doScroll を実行してみてください。ページが読み込まれていないときに doScroll を呼び出すと例外が発生するため、例外をキャッチするために try -catch が使用されます。
結論: 一般に、ページ DOM がロードされていない場合、 doScroll メソッドが呼び出されたときに例外が生成されます。次に、それを逆に使用します。例外がなければ、ページ DOM はロードされています。

これは、最初の読み込み準備完了を処理する問題です。ページが読み込まれた後に準備完了になったらどうなるでしょうか。

jQuery は、この状況ではバインディングをスキップする必要があります:

if ( document.readyState === "complete" ) { // スクリプトに準備完了を遅らせる機会を許可するために、非同期的に処理します setTimeout( jQuery.ready ) }

決定ページの読み込みが完了したかどうかは、readyState のステータスを確認することで直接確認できます。ここでは、主に正しい実行を保証するために、最小時間後に実行するタイマーが与えられます。

上記は、jQuery の read イベントとload イベントの内容です。その他の関連記事については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。