"JS" How to implement jquery's Ready method with native JS

jquery $ (document). Ready () is similar to the Window.onload method in traditional JavaScript, but differs from the window.onload approach.

Overall, window.onload () the way to do this is to wait until all the elements of the page that contain the picture are loaded and run.

$ (document). Ready () is a DOM once the structure is drawn, it runs without waiting for loading to complete.

A little more. Can compare their differences in the following ways:

1. Run time

Window.onload must wait until all the elements of the page contain pictures are loaded and run. $ (document). Ready () is when the DOM structure is drawn and runs without waiting for loading to complete.

2. Different writing numbers

Window.onload cannot write multiple at the same time, assuming that there are multiple window.onload methods, only one will run.

$ (document). Ready () can write multiple at the same time. And all can be run.

3. Simplified notation

Window.onload did not simplify the wording.

$ (document). Ready (function () {}) can be simply written as $ (function () {});

In some of the development. JavaScript is commonly used. I'm using the jquery pattern, which is, most of the time, the first line that reads:

$ (document). Ready (function () {

...

});

This time, do not have to wait for all the JS and picture loading completed. will be able to run some methods. There are times when it is necessary to wait for all elements to be loaded and completed. Talent enough to run some methods, for example, some pictures or anything else is not loaded well, this time, click on some button, will cause an unexpected situation, this time, need to use:

$ (window). Load (function () {$ ("#btn-upload"). Click (function () {   //For example:      Uploadphotos ();});});

Take the browser to load the document as an example, after the page loading is complete. Browsers add events to DOM elements via Javascript. In regular Javascript code, the Window.onload method is typically used, whereas in Jquery, the $ (document) method is used. $ (document). The Ready () method is the most important function in the event module, which can greatly improve the speed of the Web application.

In addition, it is important to note that the event that is registered in the Ready () method will be run only if the DOM is in place, so the associated file for the element may not have been downloaded at this time.

For example, the HTML related to the image is finished downloading, and has been parsed into the DOM tree. However, it is very likely that the picture is not loaded yet, so this property is not necessarily valid at this time than the height and width of the slice. To solve the problem, you can use Jquery with a method of loading the page---the Load () method. The Load () method binds a handler function in the OnLoad event of the element. Assume that the handler is bound to a Window object. Triggers when all content (including forms, frames, objects, images, and so on) is loaded. Assuming that the handler is bound on an element, it is triggered after the element's content is loaded.

The jquery code is as follows:

$ (window). Load (function () {       //write Code}), equivalent to the following code in JavaScript window.onload = function () {     //write code}

So, for some special needs, you don't want to use jquery. But also want to implement jquery's Ready method.

How to use native JS to implement jQuery 's ready method ? Here is one of the practices:

Function Ready (FN) {if (Document.addeventlistener) {//Standard browser document.addeventlistener (' domcontentloaded ', function () {//Logout time, avoid repeating trigger document.removeeventlistener (' domcontentloaded ', arguments.callee,false); FN ();//Run function},false);} else if (document.attachevent) {//ie browser document.attachevent (' onreadystatechange ', function () {if ( document.readystate== ' complete ') {document.detachevent (' onreadystatechange ', Arguments.callee); FN ();//function Run});}}

Author: Zhi Zhi

Sign: The road long its repair far XI, I will go up and down and quest.

"JS" How to implement jquery's Ready method with native JS