How to realize the Ready method of jquery using native JS in "JS"

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

in general, the Window.onload () method must wait until all elements of the page, including pictures, have been loaded before they can be executed. $ (document). Ready () is executed after the DOM structure has been drawn and does not have to wait until the load has finished.

 

Specifically, you can compare their differences in the following ways:

1. Execution Time

Window.onload must wait until all elements of the page including the picture have been loaded before they can be executed. $ (document). Ready () is executed after the DOM structure has been drawn and does not have to wait until the load has finished.

2. Different number of writes

Window.onload cannot write multiple at the same time, if there are multiple window.onload methods, only one is executed.

$ (document). Ready () can be written multiple at the same time, and can be executed.

3. Simplified wording

Window.onload does not have a simplified formulation.

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

In some development, JavaScript is generally used, and I am using the jquery pattern, which is most of the time, the first line is written:

$ (document). Ready (function () {

...

});

This time, not necessarily wait for all the JS and picture loaded, you can execute some methods, but sometimes, must wait for all the elements are loaded, before you can execute some methods, such as some pictures or other aspects have not loaded well, this time, click on some buttons, Can cause an unexpected situation, this time, you need to use:

$ (window). Load (function () {
$ ("#btn-upload"). Click (function () {   //(i.e.,
      Uploadphotos ();
});
};

As an example of a browser loading document, the browser adds events to the DOM element through Javascript after the page is loaded. In regular Javascript code, the Window.onload method is usually used, whereas in Jquery, the $ (document) is used. Ready () method. $ (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 because the events registered within the $ (document). Ready () method are executed as long as the DOM is ready, the associated file for the element may not be downloaded at this time. For example, a picture-related HTML download is complete and has been parsed into a DOM tree, but it is quite possible that the picture has not been loaded yet, so properties such as the height and width of the picture are not necessarily valid at this time. To solve this problem, you can use another method of page loading in Jquery---the Load () method. The Load () method binds a handler function in the OnLoad event of the element. If the handle function is bound to the Window object, it fires after all content (including Windows, frames, objects, images, and so on) is loaded, and if the processing function is bound to the element, it is triggered after the element's contents have been loaded. The jquery code is as follows:

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

Then, for some special needs, you don't want to use jquery, but you want to implement the Ready method of jquery. How to implement the Ready method of jquery using native JS . Here is one of the practices:

Function Ready (FN) {
	if (document.addeventlistener) {		//Standard browser
		document.addeventlistener (' Domcontentloaded ', function () {
			//logoff time, avoid repeatedly triggering
			document.removeeventlistener (' domcontentloaded ', Arguments.callee,false);
			fn ();		Execute function
		},false);
	} else if (document.attachevent) {		//ie browser
		document.attachevent (' onreadystatechange ', function () {
			if ( document.readystate== ' complete ') {
				document.detachevent (' onreadystatechange ', Arguments.callee);
				fn ();		function execution
			}}
		);
	}

Author: Zhi Zhi

Sign: Road Long its repair far XI, I will go up and down and search.