Implementierungsfall von domReady

Wir alle kennen die Methode $(document).ready(fn) von JQ. Das Skript kann ausgeführt werden, nachdem die Seite fertig ist. Im Vergleich zum herkömmlichen window.onload-Ereignis besteht der Vorteil dieser Methode darin, dass das Onload-Ereignis warten muss, bis alle Ressourcen auf der Seite geladen sind, bevor es ausgelöst wird wird feststellen, ob der DOM-Baum abgeschlossen ist.

Der Unterschied zwischen dem Ereignis „onload“ und „onreadystate“ besteht darin, dass das Ereignis „onreadystatechange“ nur für den IE gilt und nach IE11 nicht mehr unterstützt wird. Dieses Ereignis wird vom IE-Browser für bestimmte DOM-Elemente angegeben, die die Ressourcenauslastung bestimmen müssen.

DOM-Elemente, die das onreadystatechange-Ereignis unterstützen, müssen über ein readyState-Attribut verfügen, und der Rückgabewert dieses Attributs wird verwendet, um den Ladestatus der Ressource zu beschreiben.

Im Allgemeinen wird das onreadystatechange-Ereignis eher zur Beurteilung des Iframe-Ladens verwendet.

Das Letzte, was wir verstehen müssen, ist, dass der Prozess unterschiedlich ist, wenn die Seite einen Iframe enthält, die Generierung des DOM-Baums sowie das Auslösen des DOMContentLoaded-Ereignisses und das Auslösen des Onload-Ereignisses für IE und Nicht-IE.

Im Allgemeinen:

IE: Analysieren Sie die Indexseite – > Analysieren Sie das DOMContentLoaded-Ereignis des Iframes – > löst das DOMContentLoaded-Ereignis der Indexseite aus –> löst das Onload-Ereignis der Indexseite aus.

!IE: Die Indexseite analysieren-> Das DOMContentLoaded-Ereignis der Indexseite auslösen-> Das DOMContentLoaded-Ereignis der Iframe-Seite auslösen-> Der iframe-> löst das Onload-Ereignis der Indexseite aus.

Aus diesem Prozess können wir ersehen, dass Sie im IE warten müssen, bis der Iframe der aktuellen Seite geladen und analysiert wird, bevor die aktuelle Seite geladen und analysiert werden kann Das Parsen des Iframes ist für die asynchrone Ausführung der aktuellen Seite sehr wichtig.

Das Folgende ist der spezifische 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));

Codeaufruf:

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

Der obige domReady-Implementierungsfall ist der gesamte vom Herausgeber geteilte Inhalt Ich hoffe, dass es jedem eine Referenz geben kann, und ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Weitere Artikel zu domReady-Implementierungsfällen finden Sie auf der chinesischen PHP-Website!