ready and load events in jQuery

ready and load events in jQuery (from MOOC.com)

jQuery has 3 methods for loading documents

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

One is ready and the other is load, what is the difference between the two?

Which one executes first, ready or load:
During the interview process, we are often asked a question: Which one, ready or load, is executed first, and which one is executed last? The answer is that ready is executed first and load is executed later.

DOM document loading steps:
To understand why ready is executed first and load is executed later, you must first understand the steps of DOM document loading:

(1) Parse the HTML structure. (2) Load external scripts and style sheet files. (3) Parse and execute script code. (4) Construct HTML DOM model. //ready (5) Load external files such as images. (6) The page is loaded. //load

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

Conclusion:

The difference between ready and load lies in the loading of resource files. ready builds the basic DOM structure, so the faster the code should be loaded, the better. In an age of high-speed browsing, no one wants to wait for answers. If a website page loads for more than 4 seconds, sorry, 1/4 of your users will face loss, so user experience is crucial for the framework. The sooner we should process the DOM, the better. We don’t need to wait for the image. Process the loading of the frame only after all resources are loaded. If there are too many image resources, the load event will not be triggered for a long time.

Let’s take a look at how jQuery handles the issue of document loading timing:

jQuery.ready.PRomise = function( obj ) { if ( !readyList ) { readyList = jQuery.Deferred(); if ( document.readyState === "complete" ) { // Handle it asynchronously to allow scripts the opportunity to delay ready         setTimeout( jQuery.ready );         } else {               document.addEventListener( "DOMContentLoaded",, false );           window.addEventListener  ("load", completed , false);
The specific strategy for jQuery compatibility can be seen: for advanced browsers, we are currently happy to use the DOMContentLoaded event, saving time and effort.

So what to do with the old IE?

Continue to look at the jQuery solution:

// 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/ / detach(); // and execute any waiting functions jQuery.ready(); } })(); }

If the browser has a document.onreadystatechange event, when the event is triggered, if document.readyState=complete, the DOM tree can be considered to have been loaded. However, this event is not very reliable. For example, when there are images in the page, it may be triggered after the onload event. In other words, it can only be executed correctly when the page contains no binary resources or very few or is cached as a backup. Take your pick.

Loading detection for IE

Diego Perini in 2007 reported a way to detect whether IE is loaded, using the doScroll method call. For details, see http://Javascript.nwbox.com/IEContentLoaded/.
The principle is that when IE is in a non-iframe, it can only continuously judge whether the DOM is loaded by whether it can execute doScroll. Try to execute doScroll every 50 milliseconds in the above interval. Note that calling doScroll will cause an exception when the page is not loaded, so try -catch is used to catch the exception.
Conclusion: So in general, when the page DOM is not loaded, an exception will be generated when the doScroll method is called. Then we use it in reverse. If there is no exception, then the page DOM has been loaded.

This is a problem where we deal with ready loading in the first time. What if ready is after the page is loaded?

jQuery must skip binding for this situation:

if ( document.readyState === "complete" ) { // Handle it asynchronously to allow scripts the opportunity to delay ready setTimeout( jQuery.ready ); }

Determine whether the loading of the page is completed directly by checking the status of readyState. Here, a timer will be given for execution after a minimum time, mainly to ensure correct execution.

The above is the content of ready and load events in jQuery. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!