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 ページの onload イベントをトリガする -> インデックス ページの DOMContentLoaded イベントをトリガする-> インデックス ページの onload イベントをトリガーします。

!IE: インデックス ページを解析します -> インデックス ページの DOMContentLoaded イベントをトリガーします -> iframe ページを解析します -> iframe の onload イベントをトリガーします -> ; インデックス ページの onload イベントをトリガーします。

このプロセスから、IE では、現在のページの iframe がロードされて解析されるまで、非 IE では 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 中国語をサポートしていただければ幸いです。 Webサイト。 。

domReady導入事例に関連する記事をもっと知りたい場合は、PHP中国語ウェブサイトに注目してください。