The ready of method of the jquery event USES detail

$(document).ready(function(){// code}); Or $(window).load(function(){// code});

The difference between them is that ready is triggered after the load of DOM structure, while load is triggered after the load of DOM structure, css, js, images and so on in the page. Obviously, ready is more suitable to be used as the page initialization. But sometimes it's not. You need to take a step further to see the internals.

So how does the inside of ready determine when the DOM structure has been loaded? And what about the judgment of different browsers?

The answer lies in the jquery code, assuming that version of jquery is ES24en-1.11.3.js.

Key code of ready (3507~3566 lines), highlighted 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 split into two parts when ready is triggered

1. Triggers in standard browsers

When the browser is based on a standard browser, the "DOMContentLoaded" event is triggered after the DOM structure is loaded, which is used internally by jquery as the trigger source for ready.

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

2. Trigger under IE browser

When the browser is IE, because the IE browser (which is painful and powerful) does not support "DOMContentLoaded" events, it has 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 the scarlet letter of the above code, using the "document.documentElement.doScroll ("left")" method to scroll the page, if not finished loading, wait for 50 milliseconds to continue rolling, until the rolling movement will trigger ready.

However, if frame is present on the page, the window.onload event is used as the trigger source for ready.

Therefore, under IE, when there is frame in the page, ready is also triggered after all the contents in the page have been loaded.

The difference between ready and load events in jQuery

When you use jQuery at work, 1 will always look like this before using it:

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

Sometimes it says:

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

One is ready1 and the other is load. What's the difference between the two? Today we are going to have a chat.
ready or load who will execute first:

During the interview process, people are often asked one question: which one should execute first, ready or load? The answer is ready first and load after.
Steps to load the DOM document:

To understand why ready executes first and load after, we need to talk about the steps of DOM document loading:

(1)  parsing HTML Structure. 
(2)  Load external script and stylesheet files. 
(3)  Parse and execute the script code. 
(4)  structure HTML DOM Model. //ready
(5)  Load external files such as images. 
(6)  The page loads. //load

As you will understand from the above description, ready is executed after step (4) is completed. However, load will not be implemented until step (6) is completed.

ready events:

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

load events:

The load event must wait until all content in the web page has been loaded before it is executed. This occurs when a web page has a large number of images: the web page document has been rendered, but the load event cannot be triggered immediately because the web page data has not yet been fully loaded.

Conclusion:

I believe you have understood the difference between ready and load. In fact, ready is similar to load if there are no media files like pictures on the page, but it is different if there are files on the page. Therefore, it is recommended to use ready in your work.