jqueryイベントのready()メソッド使用の詳細

ページ初期化では$(document)が多く用いられる.ready(function(){//コード});または$(window).load(function(){//コード});
彼らの違いは、readyはDOMの構造がロードされた後にトリガーされ、loadはページ内にDOM構造、css、js、ピクチャなどを含めてロードが完了した後にトリガーされ、明らかにreadyはページ初期化として使用するのに適している.しかし、時にはそうではないこともあります.内部メカニズムをさらに確認する必要があります.
ではreadyの内部はDOMの構造がロードされたとどのように判断しますか?そして異なるブラウザの判断はどうですか?
答えはjqueryコード内にあり、jqueryのバージョンがjquery-1.11.3であると仮定する.js.
readyのキーコード(3507~3556行)、キーコードは赤で表示されます.

jQuery.ready.promise = function( obj ) {
  if ( !readyList ) {

    readyList = jQuery.Deferred();

    // Catch cases where $(document).ready() is called after the browser event has already occurred.
    // we once tried to use readyState "interactive" here, but it caused issues like the one
    // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
    if ( document.readyState === "complete" ) {
      // Handle it asynchronously to allow scripts the opportunity to delay ready
      setTimeout( jQuery.ready );

    // Standards-based browsers support DOMContentLoaded
    } else if ( document.addEventListener ) {
      // Use the handy event callback
      document.addEventListener( "DOMContentLoaded", completed, false );

      // A fallback to window.onload, that will always work
      window.addEventListener( "load", completed, false );

    // If IE event model is used
    } else {
      // Ensure firing before onload, maybe late but safe also for iframes
      document.attachEvent( "onreadystatechange", completed );

      // A fallback to window.onload, that will always work
      window.attachEvent( "onload", completed );

      // If IE and not a frame
      // continually check to see if the document is ready
      var top = false;

      try {
        top = window.frameElement == null && document.documentElement;
      } catch(e) {}

      if ( top && top.doScroll ) {
        (function doScrollCheck() {
          if ( !jQuery.isReady ) {

            try {
              // Use the trick by Diego Perini
              // http://javascript.nwbox.com/IEContentLoaded/
              top.doScroll("left");
            } catch(e) {
              return setTimeout( doScrollCheck, 50 );
            }

            // detach all dom ready events
            detach();

            // and execute any waiting functions
            jQuery.ready();
          }
        })();
      }
    }
  }
  return readyList.promise( obj );
};

上のコードはreadyをトリガするときに2つの部分に分けることができます.
1.標準ブラウザでのトリガ
ブラウザが標準ブラウザに基づいている場合、DOM構造をロードした後に「DOMContentLoaded」イベントがトリガーされ、jquery内部ではreadyのトリガーソースとして使用されます.

document.addEventListener( "DOMContentLoaded", completed, false );

2.IEブラウザでのトリガ
ブラウザがIEブラウザである場合、IEブラウザ(卵が痛くて強い)は「DOMContentLoaded」イベントをサポートしないため、別の方法しか考えられません.

        (function doScrollCheck() {
          if ( !jQuery.isReady ) {

            try {
              // Use the trick by Diego Perini
              // http://javascript.nwbox.com/IEContentLoaded/
              top.doScroll("left");
            } catch(e) {
              return setTimeout( doScrollCheck, 50 );
            }

            // detach all dom ready events
            detach();

            // and execute any waiting functions
            jQuery.ready();
          }
        })();

IEの下のやり方は、上のコードの赤字で、「document.documentElement.doScroll("left")」という方法でページをスクロールし、ロードが完了しない場合は50ミリ秒待ってからロールを続け、ロールが動くまでreadyをトリガーします.
ただし、ページにframeがある場合はwindowを使用します.onloadイベントはreadyのトリガ源として使用されます.
したがってIEの下で、ページにframeがある場合、readyもページ内のすべてのコンテンツのロードが完了してからトリガーされます.
jQueryにおけるreadyとloadイベントの違い
皆さんは仕事でjQueryを使うときは必ず使う前にこうします.

//document ready
$(document).ready(function(){
  ...code...
})
//document ready   
$(function(){
  ...code...
})

時々こう書きます.

//document load
$(document).load(function(){
  ...code...
})

一つはready一つはloadですが、この二つにはいったいどんな違いがありますか?今日は話をしましょう.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イベント:
readyイベントは、DOM構造の描画が完了すると描画が実行されます.これにより、大量のメディアファイルがロードされていなくても、JSコードと同じように実行できることが保証されます.
loadイベント:
loadイベントは、Webページのすべてのコンテンツがロードされるまで実行されません.1つのページに大量の画像がある場合、このような状況が発生します.ページドキュメントはすでに表示されていますが、ページデータが完全にロードされていないため、loadイベントはすぐにトリガーされません.
まとめ:
readyとloadの違いは分かっていると思いますが、実際にページに画像などのメディアファイルがなければreadyとloadは差がありませんが、ページにファイルがあると違いますので、仕事でreadyを使うことをお勧めします.