zoukankan      html  css  js  c++  java
  • domReady的实现

      我们都知道JQ的 $(document).ready(fn) 方法。可以在页面准备就绪后才执行脚本,该方法相比传统的window.onload 事件,它的优势体现于onload事件是需要等到页面中所有资源都加载完毕后才会触发,而JQ的ready方法则会判断DOM树是否构建完毕。

      onload相比较onreadystate事件的区别是,onreadystatechange事件是IE独有的,并且在IE11之后不再支持,该事件是IE浏览器为特定的需要判断资源加载的DOM元素指定的事件。
    支持onreadystatechange事件的DOM元素必然有一个readyState属性,该属性的返回值,用于说明资源的加载情况。
    一般而言,onreadystatechange事件更多用于Iframe的加载判断。

      最后我们需要了解的是当页面包含iframe后,DOM树的生成,以及DOMContentLoaded事件的触发,onload事件的触发,其流程对于IE非IE是不同的。
    一般来说:
        IE :解析index页面 -> 解析iframe页面 -> 触发iframe的DOMContentLoaded事件 -> 触发iframe页面 onload事件 -> 触发Index页面的DOMContentLoaded事件 -> 触发index页面的onload事件。
        !IE : 解析index页面 -> 触发index页面的DOMContentLoaded事件 -> 解析iframe页面 -> 触发iframe页面的DOMContentLoaded事件 -> 触发iframe的onload事件 -> 触发index页面的onload事件。
      从这个流程,我们可以看出IE中,必须等待当前页面的iframe加载解析完毕,当前页面才能加载解析完毕,而在非IE中,iframe的加载与解析对当前页面来言更多的是异步执行。

      下面是具体的代码:

      

     1 (function(win){
     2 
     3     'use strict';
     4 
     5     var document = win.document,
     6         readList = [],        // 等待执行的函数堆栈
     7         flag = false;
     8 
     9     var removeEvent = function(){
    10 
    11         if(document.addEventListenner){
    12             window.removeEventListenner('load',handle,false);
    13         }else if(document.attachEvent){
    14             window.detachEvent('onload',handle)
    15             document.detachEvent('onreadystatechange',readyState);
    16         }else{
    17             window.onload = null;
    18         }
    19 
    20     },
    21     handle = function(){
    22 
    23         if(!flag){
    24             
    25             while(readList.length){    
    26                 readList[0].call();    //执行函数
    27                 readList.shift();    //删除第一个数组元素
    28             }
    29             flag = true;
    30             removeEvent();
    31         }
    32 
    33     },
    34     readyState = function(){
    35         if(document.readyState == 'complete'){
    36             handle();
    37         }    
    38     },
    39     DOMContentloaded=function(){
    40 
    41         if(document.readyState == 'complete'){
    42             setTimeout(handle);    // setTimeout 会使用最短时间,该时间不同系统并不一样。
    43         }else if(document.addEventListenner){
    44             document.addEventListenner('DOMContentLoaded',fn,false);
    45             window.addEventListenner('load',handle,false);
    46         }else if(document.attachEvent){
    47             window.attachEvent('onload',handle);
    48             document.attachEvent('onreadystatechange',readyState);    //onreadystatechange 事件在页面中含有iframe的时候,它会等待iframe加载完毕才会触发。
    49             
    50             if(self === self.top){    // 当页面不在iframe中则使用此种方式检测doScroll方法是否可用。如果再iframe中则用onreadstatechange事件进行判断。
    51                 (function(){
    52                     try{
    53                         document.documentElement.doScroll('left');
    54                     }catch(e){
    55                         setTimeout(arguments.callee,50);    //arguments.callee 是对当前函数的引用。
    56                         return ;
    57                     }
    58                     handle();
    59                 }());
    60             }
    61 
    62         }else{
    63             window.onload = handle;
    64         }
    65     },
    66     ready = function(fn){
    67         readList.push(fn);    // 加入待处理的堆栈中。
    68         DOMContentloaded();
    69     };
    70 
    71     win.domReady = ready;
    72 
    73 
    74 }(window));

    代码调用:

    1 domReady(function(){
    2     document.getElementById('box').innerHTML = (new Date().getTime() - date)/1000;
    3 });
  • 相关阅读:
    loj#6433. 「PKUSC2018」最大前缀和(状压dp)
    PKUWC2019游记
    10. Regular Expression Matching
    9. Palindrome Number
    8. String to Integer (atoi)
    7. Reverse Integer
    6. ZigZag Conversion
    5. Longest Palindromic Substring
    4. Median of Two Sorted Arrays
    3. Longest Substring Without Repeating Characters
  • 原文地址:https://www.cnblogs.com/HCJJ/p/5947845.html
Copyright © 2011-2022 走看看