Extract the ready of method of jquery for use alone

  • 2020-03-30 02:27:06
  • OfStack

You can use the windows.onload event, but onload, in the eyes of the page, is all the things on the page (img,iframe, etc.) after the load is finished,if the page has a large picture, it will not be executed until long after the page is displayed.

If you only need to manipulate the DOM, 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 resolved, but IE doesn't.

If one of MSDN's methods about JSCRIPT has an obscure section, an exception will be generated when the doScroll method is called when the DOM of the page is not loaded. So let's do it the other way around, and if there's no exception, then the DOM of the page is loaded. So for Mozilla & Opera, the DOMContentLoaded event is already in place after the dom tree is loaded. For Safari, there is the document. The onreadystatechange event, when the trigger, if the document. The readyState = complete, can be regarded as a dom tree has been loaded.

For Internet explorer, when within the iframe, also have the document. The onreadystatechange event, for within the iframe, ie can only by continuously perform doScroll judge whether the dom to load.

In this case, every 5 milliseconds apart to try to carry out the document. The documentElement. DoScroll (' left '). In ie8, and regard the iframe window also can have the document. The onreadystatechange event, in addition you can also use this function when build their own framework.


(function(){
 var isReady=false; //Determines whether the onDOMReady method has been executed
 var readyList= [];//Store the methods that need 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');//Under IE, whether doScroll can be performed to determine whether the dom is loaded
   }
   catch(e)
   {
    return;
   }
   bindReady();
  },5);
 }
 }
})();

Usage:


ready(dosomething);//Dosomething is an existing function
//It can also be used with closures
ready(function(){
 //Here is the logic code
});


Related articles: