Extract the ready() method of jquery and use it alone. Example_jquery

You can use the windows.onload event, but in my opinion, onload can only occur after all the things on the page (img, iframe and other resources) have been loaded. If there are large pictures on the page, they will be displayed on the page. It took a long time to execute.

If you only need to operate on the DOM, then there is no need to wait until the page is fully loaded. We need a faster way. Firefox has a DOMContentLoaded event that can be easily solved, but unfortunately IE does not.

MSDN has an inconspicuous saying about a JSCRIPT method. When the page DOM is not loaded, an exception will be generated when the doScroll method is called. Then we use it in reverse. If there is no exception, then the page DOM has been loaded. So for Mozilla & Opera browsers, there is a ready-made DOMContentLoaded event after the dom tree is loaded. For the Safari browser, there is a document.onreadystatechange event. When this event is triggered, if document.readyState=complete, it can be considered that the DOM tree has been loaded.

For IE, when it is inside an iframe, there is also a document.onreadystatechange event. For IE when it is inside a non-iframe, it can only be judged whether the dom is loaded by whether doScroll can be executed.

In this example, try to execute document.documentElement.doScroll('left') every 5 milliseconds. Under IE8, there will also be a document.onreadystatechange event when viewing non-iframe windows. In addition, you can also use this function when building your own frame.

Copy code The code is as follows:

(function(){
var isReady=false ; // Determine whether the onDOMReady method has been executed
var readyList= []; // Temporarily store the method that needs to be executed in this array
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');//Use whether doScroll can be executed under IE to determine whether the dom is loaded
}
catch(e)
{
return;
}
bindReady();
},5);
}
}
})();

How to use it:

Copy code The code is as follows:

ready(dosomething);//dosomething already exists Function
//can also be used through closure
ready(function(){
//Here is the logic code
});