Implementation case of domReady

We all know JQ’s $(document).ready(fn) method. The script can be executed after the page is ready. Compared with the traditional window.onload event, the advantage of this method is that the onload event needs to wait until all resources in the page are loaded before it is triggered, while JQ's ready method will Determine whether the DOM tree is completed.

The difference between onload and onreadystate events is that the onreadystatechange event is unique to IE and is no longer supported after IE11. This event is an event specified by the IE browser for specific DOM elements that need to determine resource loading. .

DOM elements that support the onreadystatechange event must have a readyState attribute, and the return value of this attribute is used to describe the loading status of the resource.

Generally speaking, the onreadystatechange event is more used for Iframe loading judgment.

The last thing we need to understand is that when the page contains an iframe, the generation of the DOM tree, the triggering of the DOMContentLoaded event, and the triggering of the onload event are different for IE and non-IE.

Generally speaking:

IE: Parse the index page-> Parse the iframe page-> Trigger the DOMContentLoaded event of the iframe-> Trigger the iframe page onload event-> Trigger the Index page DOMContentLoaded event-> triggers the onload event of the index page.

!IE: Parse the index page-> Trigger the DOMContentLoaded event of the index page-> Parse the iframe page-> Trigger the DOMContentLoaded event of the iframe page-> Trigger the onload event of the iframe-> Trigger the index page onload event.

From this process, we can see that in IE, you must wait for the iframe of the current page to be loaded and parsed before the current page can be loaded and parsed. In non-IE, the loading and parsing of the iframe is very important to the current page. More asynchronous execution.

The following is the specific code:

(function(win){
 
  'use strict';
 
  var document = win.document,
    readList = [],    // 等待执行的函数堆栈
    flag = false;
 
  var removeEvent = function(){
 
    if(document.addEventListenner){
      window.removeEventListenner('load',handle,false);
    }else if(document.attachEvent){
      window.detachEvent('onload',handle)
      document.detachEvent('onreadystatechange',readyState);
    }else{
      window.onload = null;
    }
 
  },
  handle = function(){
 
    if(!flag){
       
      while(readList.length){  
        readList[0].call();  //执行函数
        readList.shift();  //删除第一个数组元素
      }
      flag = true;
      removeEvent();
    }
 
  },
  readyState = function(){
    if(document.readyState == 'complete'){
      handle();
    }  
  },
  DOMContentloaded=function(){
 
    if(document.readyState == 'complete'){
      setTimeout(handle);  // setTimeout 会使用最短时间，该时间不同系统并不一样。
    }else if(document.addEventListenner){
      document.addEventListenner('DOMContentLoaded',fn,false);
      window.addEventListenner('load',handle,false);
    }else if(document.attachEvent){
      window.attachEvent('onload',handle);
      document.attachEvent('onreadystatechange',readyState);  //onreadystatechange 事件在页面中含有iframe的时候，它会等待iframe加载完毕才会触发。
       
      if(self === self.top){  // 当页面不在iframe中则使用此种方式检测doScroll方法是否可用。如果再iframe中则用onreadstatechange事件进行判断。
        (function(){
          try{
            document.documentElement.doScroll('left');
          }catch(e){
            setTimeout(arguments.callee,50);  //arguments.callee 是对当前函数的引用。
            return ;
          }
          handle();
        }());
      }
 
    }else{
      window.onload = handle;
    }
  },
  ready = function(fn){
    readList.push(fn);  // 加入待处理的堆栈中。
    DOMContentloaded();
  };
 
  win.domReady = ready;
 
 
}(window));

Code call:

domReady(function(){
   document.getElementById('box').innerHTML = (new Date().getTime() - date)/1000;
 });

The above implementation case of domReady is all the content shared by the editor. I hope it can help It is a reference for everyone, and I hope everyone will support the PHP Chinese website.

For more articles related to domReady implementation cases, please pay attention to the PHP Chinese website!