How to Use the ready () method of the jquery Event _ jquery

This article describes in detail how to use the ready () method of jquery events and the differences between ready and load events in jQuery. For more information, see. During page initialization, more $ (document) is used ). ready (function () {// code}); or $ (window ). load (function () {// code });

Their difference is that ready is triggered after the DOM structure is loaded, and load is triggered after the DOM structure, css, js, and images are loaded on the page, obviously, ready is more suitable for page initialization. But sometimes it is not as true. You need to further check its internal mechanism.

So how does ready determine whether the DOM structure is fully loaded? What are the judgments of different browsers?

The answer is in the jquery code, assuming that the jquery version is a jquery-1.11.3.js.

Key code of ready (3507 ~ 3566 rows), key code 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 Triggering ready.

1. Trigger in a standard browser

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

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

2. triggering in IE browser

When the browser is an IE browser, because IE does not support the "DOMContentLoaded" event, you can only find another method,

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

In IE, use the parameter document.doc umentElement. the doScroll ("left") method is used to scroll the page. If the page is not loaded, it will wait for 50 milliseconds until ready is triggered.

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

Therefore, when there is a frame in the page in IE, ready is triggered after all the content in the page is loaded.

Differences between ready and load events in jQuery

When you use jQuery in your work, it will always be like this before use:

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

Sometimes this is also the case:

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

One is ready and the other is load. What is the difference between the two? Let's have a chat today.
Ready and load:

During the interview, you are often asked the following question: what is the first execution of ready and load? The answer is that ready runs the command first and load the command.
DOM document loading steps:

To understand why ready is executed first, you must first talk about the DOM document loading steps after loading:

(1) parse the HTML structure. (2) Load External scripts and style sheet files. (3) Parse and execute the script code. (4) construct the html dom model. // Ready (5) loads external files such as images. (6) the page has been loaded. // Load

You should have understood the above description. ready will be executed after step (4) is completed. However, load is executed only after step (6) is completed.

Ready event:

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

Load event:

The load event will not be executed until all content on the webpage is loaded. If a webpage contains a large number of images, this situation occurs: The webpage documents have been displayed, but because the webpage data has not been fully loaded, the load event cannot be triggered immediately.

Summary:

I believe you have understood the differences between ready and load. In fact, if there are no media files such as images on the page, ready and load are similar, but there are different files on the page, we recommend that you use ready in your work.