JavaScript Ondomready executes after the DOM tree is loaded

(function () {
var isready=false;//to determine if the Ondomready method has been executed
var readylist= [];//The method that needs to be executed is in this array first.
var timer;//timer handle
Ready=function (FN) {
if (IsReady)
Fn.call (document);
Else
Readylist.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);
if (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 be used to perform doscroll in IE to determine whether the DOM is loaded
}catch (e) {
Return
}
Bindready ();
},5);
}
}
})();

Under the Use method class:
Ready (navinit);//navinit as an existing function

Or:
Ready (function () {
if (Agt.tolowercase (). IndexOf ("MSIE 6")!=-1)
NavInitForIE6 ()//If the browser is IE6, perform the NAVINITFORIE6 function to initialize the Drop-down menu
});

Description

When we want to execute a function after the page is loaded, we must think of onload. But the onload in the browser, is the page of Things (IMG, IFRAME and other resources) all loaded to occur, if the page has a large picture, will be in the page after a long time to perform. If you only need to manipulate the DOM, then there is no need to wait for the page to load. We need a quicker approach.

Firefox has domcontentloaded events can be easily resolved, unfortunately, ie did not.

One of MSDN's methods for JScript is obscure, when the page DOM is not loaded, an exception is generated when the DoScroll method is invoked. Then we use the reverse, if not abnormal, then the page DOM loading is complete!

This function, Diego Perini, was released in 07, with the method named Iecontentloaded and widely accepted, so that many open source frameworks now use this approach, such as the Ready in jquery, which is clearly described in the comments as a reference Diego The iecontentloaded method of Perini.

So: for Mozilla & Opera browsers, there are ready-made domcontentloaded events after the DOM tree is loaded, and for safari browsers, There is a Document.onreadystatechange event that, when triggered, can be considered as a DOM tree when the event is document.readystate=complete, and for IE, when in an IFRAME, There are also document.onreadystatechange events, and for IE in non-IFRAME, the DOM is not loaded until the execution of the doscroll is continuously determined. In this example, try to execute Document.documentElement.doScroll (' left ') at 5 milliseconds each interval.