How to implement JS code when loading the DOM

There are some functional requirements that need to execute some functions as soon as the DOM is loaded, but do not want to introduce the entire jquery library just for this one requirement, so the jquery method is extracted and used alone.

You can use the Windows.onload event, but onload in the view that the page is the things (Img,iframe and other resources) are all loaded before it can occur, if the page has a large picture, it will be displayed after a long time after the page is executed. Fortune International Casino

If you only need to manipulate the DOM, then there is no need to wait until the page is fully loaded. We need a faster approach. Firefox has domcontentloaded events can be easily solved, unfortunately, ie did not.

One of MSDN's methods for JScript is that when the page DOM is not loaded, an exception is generated when the DoScroll method is called. Then we use the reverse, if not abnormal, then the page Dom loading is complete. So for Mozilla & Opera browsers, there are ready-made domcontentloaded events after the DOM tree is loaded. For Safari browsers, there is a Document.onreadystatechange event that, when triggered, can be considered a DOM tree if Document.readystate=complete is already loaded.

For IE, when within the IFRAME, there are also document.onreadystatechange events, for IE in non-IFRAME, only continuously through the ability to perform doscroll to determine whether the DOM is loaded.

The

Attempts to execute Document.documentElement.doScroll (' left ') in this case for 5 milliseconds every interval. Under IE8, the appearance of the non-iframe window will also have Document.onreadystatechange events, and you can also use this function when building your own framework.

(function () {var isready=false;//Determine if the Ondomready method has been executed by Var readylist= [];//The method to be executed first temporarily exists in this array var timer;//timer handle ready= Function (FN) {if (IsReady) Fn.call (document); Elsereadylist.push (function () {return fn.call (this);}); return this;} var ondomready=function () {for (var i=0;i< readylist.length;i++) {readylist[i].apply (document);} Readylist = null;} var bindready = function (evt) {if (isReady) return;isready=true;ondomready.call (window); Document.removeeventlistener) {Document.removeeventlistener ("domcontentloaded", Bindready, false);} else if (document.attachevent) {document.detachevent ("onreadystatechange", Bindready), if (window = = window.top) { Clearinterval (timer); timer = null;}}; if (Document.addeventlistener) {Document.addeventlistener ("domcontentloaded", Bindready, false);} else if (document.attachevent) {document.attachevent ("onreadystatechange", function () {if (/loaded|complete/). Test ( document.readystate) Bindready ();}); if (window = = window.top) {timer = setinterval (function () {try{isready| | Document.Documentelement.doscroll (' left ');//can execute doscroll under IE to determine if the DOM is loaded}catch (e) {return;} Bindready ();},5);}}) ();

Here's how to use it:

Ready (dosomething);//dosomething is a function that already exists//can also be closed to use Ready (function () {//Here is logical code});

How to implement JS code when loading the DOM