Cas d'implémentation de domReady

Nous connaissons tous la méthode $(document).ready(fn) de JQ. Le script peut être exécuté une fois la page prête. Par rapport à l'événement window.onload traditionnel, l'avantage de cette méthode est que l'événement onload doit attendre que toutes les ressources de la page soient chargées avant d'être déclenché, tandis que la méthode ready de JQ. déterminera si l'arborescence DOM est terminée.

La différence entre l'événement onload et onreadystate est que l'événement onreadystatechange est unique à IE et n'est plus pris en charge après IE11. Cet événement est un événement spécifié par le navigateur IE pour des éléments DOM spécifiques qui doivent déterminer le chargement des ressources.

Les éléments DOM qui prennent en charge l'événement onreadystatechange doivent avoir un attribut readyState, et la valeur de retour de cet attribut est utilisée pour décrire l'état de chargement de la ressource.

De manière générale, l'événement onreadystatechange est davantage utilisé pour le jugement de chargement d'Iframe.

La dernière chose qu'il faut comprendre est que lorsque la page contient une iframe, la génération de l'arborescence DOM, ainsi que le déclenchement de l'événement DOMContentLoaded et le déclenchement de l'événement onload, le processus est différent pour IE et non-IE.

De manière générale :

IE : analyser la page d'index-> analyser la page iframe-> déclencher l'événement DOMContentLoaded de l'iframe-> déclencher l'événement DOMContentLoaded de la page d'index-> déclenche l'événement onload de la page d'index.

!IE : Analyser la page d'index-> Déclencher l'événement DOMContentLoaded de la page d'index-> Analyser la page iframe-> Déclencher l'événement DOMContentLoaded de la page iframe-> l'iframe-> Déclenche l'événement onload de la page d'index.

De ce processus, nous pouvons voir que dans IE, vous devez attendre que l'iframe de la page actuelle soit chargée et analysée avant que la page actuelle puisse être chargée et analysée. Dans non-IE, le chargement et l'analyse. l'analyse de l'iframe est très importante pour la page actuelle.

Ce qui suit est le code spécifique :

(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));

Appel de code :

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

Le cas d'implémentation de domReady ci-dessus est tout le contenu partagé par l'éditeur, je. j'espère que cela pourra donner une référence à tout le monde, et j'espère également que tout le monde soutiendra le site Web PHP chinois.

Pour plus d'articles liés aux cas d'implémentation de domReady, veuillez faire attention au site Web PHP chinois !