Detailed explanation of the use of ready() method of jquery event_jquery

In page initialization, $(document).ready(function(){//code}); or $(window).load(function(){//code});

The difference between them is that ready is triggered after the DOM structure is loaded, and load is triggered after the DOM structure, css, js, images, etc. in the page are loaded. Obviously ready is more suitable for page initialization. . But sometimes that's not always the case. Need to look further into its internal mechanisms.

So how does ready internally determine that the DOM structure has been loaded? And how do different browsers judge it?

The answer lies within the jquery code, assuming the version of jquery is jquery-1.11.3.js.

The key code of ready (lines 3507~3566), the key code is marked in red:

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 );
};

The above code can be divided into two parts when ready is triggered

1. Trigger under standard browser

When the browser is based on a standard browser, the "DOMContentLoaded" event will be triggered after loading the DOM structure. jquery internally uses this event as the trigger source of ready.

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

2. Trigger under IE browser

When the browser is IE, because IE (which is so painful and powerful) does not support the "DOMContentLoaded" event, you have to find another way,

        (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();
          }
        })();

The method under IE is to use the "document.documentElement.doScroll("left")" method in the red text of the above code to scroll the page. If it is not loaded, wait for 50 milliseconds and continue scrolling until it scrolls. Then trigger ready.

However, if there is a frame in the page, the window.onload event will be used as the trigger source of ready.

So under IE, when there is a frame in the page, ready will not be triggered until all the content in the page is loaded.

The difference between ready and load events in jQuery

When you use jQuery at work, you must do this before using it:

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

Sometimes it is written like this:

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

One is ready and the other is load. What is the difference between the two? Let’s talk today.
Which one is executed first, ready or load:

During the interview process, everyone is often asked a question: Which one of ready and load is executed first, and which one is executed later? The answer is that ready is executed first and load is executed later.
Steps for loading DOM documents:

To understand why ready is executed first and load is executed later, we must first talk about the steps of loading DOM documents:

(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load

You should have understood from the above description that ready is executed after step (4) is completed. But load will not be executed until step (6) is completed.

ready event:

The ready event is executed after the DOM structure is drawn. This ensures that even if a large number of media files are not loaded, the JS code can still be executed.

load event:

The load event must wait until all content in the web page is loaded before it is executed. If there are a large number of images in a web page, this situation will occur: the web page document has been rendered, but because the web page data has not been completely loaded, the load event cannot be triggered immediately.

Summary:

I believe everyone already understands the difference between ready and load. In fact, if there are no media files such as pictures in the page, ready and load are almost the same, but it is different if there are files in the page, so it is still recommended for everyone to work on Ready is used in Chinese.