"JavaScript" onload the things that load ready

First, define the steps for page loading:

1. Download parsing HTML document structure

2. Loading external script files and style sheet files

3. Parsing and executing script code

4. Constructing HTML DOM model

5. Loading external files such as pictures

6. Page load Complete

Next, let's introduce each of the three:

　　Load () Method:

The load () method has two total, namely the load () method of jquery and the load () method of jquery Ajax.

How to distinguish two methods is different from the parameters.

　　　　Jquery:

The load () event occurs when the specified element (and child element) is loaded.

This event applies to any element that has a URL (the image, script, frame, inline frame).

Depending on the browser (Firefox and IE), the Load event may not be triggered if the image has been cached.

Grammar:

$ (selector). Load (function)

　　　　JQuery Ajax:

The data is loaded from the server via an AJAX request and the returned data is placed into the specified element.

Grammar:

Load (url,data,function (RESPONSE,STATUS,XHR))

The Load event must wait until all content in the Web page has been loaded before it is executed. That is, the sixth step above is completed before the function is run. If a page has a large number of images, then this happens: The Web document has been rendered, but because the page data is not fully loaded, the Load event can not be triggered immediately. So when we want to load a particularly large picture, if not in the picture label limit the size of the image, but in the load set the size of the image, it will cause the picture to open the page, until the picture is loaded after the full load and then change the size of the problem. In this way, the user experience will be very poor.

　　Ready () Method:

The Ready () method runs after the completion of the 4th step, where the DOM structure is painted and executed. This ensures that even if a large number of media files are not loaded, the JS code can be executed as well.

Grammar:

$ (document). Ready (function)

$ (). Ready (function)

$ (function)

The above three kinds of writing effect is the same, the latter two kinds of wording is the first kind of shorthand way.

Therefore, the above special large picture loading situation is best to put the picture settings in the Ready () method, so wait until the beginning to load the picture, it has already set the size of the picture, so that the picture will not open the page and break the page layout of the situation occurred.

　　OnLoad () Event:

The first two methods are jquery, and onload () is an event of JS, just like the onclick () event.

The OnLoad event occurs immediately after the page or image has finished loading.

Grammar:

Onload= "Somejavascriptcode"

So you can see the difference between the three, load () and ready () is the method of jquery, OnLoad () is a JS event.

If there are no media files such as associated pictures in the document, there is not much difference between using load () and using the Ready () performance, but using ready () will avoid a lot of hassle if there is one.

There is only one function of the load () method, that is, when you run multiple load () methods, only the last one works, and the Ready () method can run multiple at the same time, which is the advantage of the well () method in relation to the load () method.

So when you need to use this method, use the Ready () method as much as possible.

As with the OnLoad () event, the use of the method is no different, as is the case with the onclick (), onmouseover (). This is the difference between onload () and load (), which seems to be the same, but it is completely different.

"JavaScript" onload the things that load ready