Maison > interface Web > js tutoriel > le corps du texte

Cas d'implémentation de domReady

高洛峰
Libérer: 2017-01-04 16:00:51
original
1338 Les gens l'ont consulté

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));
Copier après la connexion

Appel de code :

domReady(function(){
   document.getElementById('box').innerHTML = (new Date().getTime() - date)/1000;
 });
Copier après la connexion

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 !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal