domReady 구현 사례

우리 모두는 JQ의 $(document).ready(fn) 메소드를 알고 있습니다. 페이지가 준비된 후에 스크립트를 실행할 수 있습니다. 기존 window.onload 이벤트와 비교할 때 이 방법의 장점은 onload 이벤트가 트리거되기 전에 페이지의 모든 리소스가 로드될 때까지 기다려야 한다는 점입니다. 반면 JQ의 Ready 메서드는 DOM 트리가 완성되었는지 여부를 결정합니다.

onload와 onreadystate 이벤트의 차이점은 onreadystatechange 이벤트는 IE에 고유하며 IE11 이후에는 더 이상 지원되지 않는다는 것입니다. 이 이벤트는 리소스 로딩을 결정해야 하는 특정 DOM 요소에 대해 IE 브라우저에서 지정하는 이벤트입니다.

onreadystatechange 이벤트를 지원하는 DOM 요소에는 ReadyState 속성이 있어야 합니다. 이 속성의 반환 값은 리소스의 로드 상태를 설명하는 데 사용됩니다.

일반적으로 onreadystatechange 이벤트는 Iframe 로딩 판단에 더 많이 사용됩니다.

마지막으로 이해해야 할 점은 페이지에 iframe, DOM 트리 생성, DOMContentLoaded 이벤트 트리거 및 onload 이벤트 트리거가 포함된 경우 프로세스가 다르다는 것입니다. IE 및 비 IE의 경우.

일반적으로 말하면:

IE: 인덱스 페이지 구문 분석-> iframe 페이지 구문 분석-> iframe의 DOMContentLoaded 이벤트 트리거-> > 인덱스 페이지의 DOMContentLoaded 이벤트를 트리거합니다.-> 인덱스 페이지의 onload 이벤트를 트리거합니다.

!IE: 인덱스 페이지 구문 분석-> 인덱스 페이지의 DOMContentLoaded 이벤트 트리거-> iframe 페이지 구문 분석-> iframe-> 인덱스 페이지 온로드 이벤트를 트리거합니다.

이 과정에서 IE에서는 현재 페이지가 로드되고 파싱되기 전에 현재 페이지의 iframe이 로드되고 파싱될 때까지 기다려야 한다는 것을 알 수 있습니다. iframe 구문 분석은 현재 페이지에서 더 많은 비동기 실행에 매우 중요합니다.

다음은 구체적인 코드입니다.

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

코드 호출:

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

위의 domReady 구현 사례는 모두 편집자가 공유한 내용입니다. 이것이 모든 사람에게 참고가 되기를 바라며, 또한 모든 사람이 PHP 중국어 웹사이트를 지지해주기를 바랍니다.

domReady 구현 사례와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!