zoukankan      html  css  js  c++  java
  • jQuery 中ready与load事件

    jquey有3种针对文档加载的方法:

    //document ready
    $(document).ready(function(){
            //...代码...
    })
    
    //document ready 简写
    $(function(){
         //...代码...
    })
    
    // document load
    $(document).load(function(){
        // ... 代码 ...
    })
    

     一个是ready一个是load,这两个到底有什么区别呢?

      在面试种,经常会被问到一个问题:ready与load哪一个先执行?答案是:ready先执行,load后执行。

    DOM文档加载的步骤:

      1. 解析HTML结构。

           2. 加载外部脚本和样式表文件

       3. 解析并执行脚本代码

       4. 构造HTML DOM模型。// ready

       5. 加载图片等外部文件

       6. 页面加载完毕。// load

    从上面的描述中,ready在第四步完成之后就执行了,但是load要在第六步完成之后才执行。

    结论:

      ready 是当DOM解析完以后就执行了

      load 是页面上所有的元素加载完成才会触发,包括页面上的图片等等

       在一个高速浏览器的时代,没人愿意等待,我们越早处理DOM越好,我们不需要等待图片资源都加载后才去处理框架的加载。

    jQuery是如何处理文档加载的问题:

      先看一下jQuery源码:

    function completed(){
          document.removeEventListner('DOMContentLoaded',completed,false);
         window.removeEventListner('load',completed,false);
         jQuery.ready(); 
    }
    jQuery.ready.promise = function(obj){
          if(!readyList){
                 readyList = jQuery.Deferred();
                 if(document.readyState == "complete"){//webkit引擎,并且webkit版本在525以下
                        setTimeout(jQuery.ready);//这里设置了一个定时器最小时间去执行,主要是保证执行的正确。
                 }else{//火狐浏览器 或者 webkit引擎525版本以上(webkit引擎在525以上引入了DOMContentLoaded事件)
                         document.addEventListner('DOMContentLoaded',completed,false);
                         window.addEventListner('load',completed,false)
                 }
          }  
          return readyList.promise(obj);
    }

      jquery的ready是通过promise给包装过的的,这也是jQuery擅长的手法,统一回调体系。

      jQuery的具体实现方法:

        1. 如果是webkit引擎,则用document的readyState属性,当值为“complete”或者“loaded”时认为是DOM解析完成

        2. 对webkit引擎还有一个办法是,因为webkit在525以上的版本引入了DOMContentLOaded事件,所以在525版本之上,则可以直接注册DOMContentLoaded事件

        3. 因为DOMContentLoaded时间最早其实是firefox私有事件,而其他浏览才开始引入的,所以对火狐浏览器可以直接使用该事件

  • 相关阅读:
    PostgreSQL备份工具-pg_probackup
    Multi-Master Replication Solutions for PostgreSQL
    PostgreSQL高可用:多主复制解决方案
    Postgressql高可用(pgpool+异步流复制)转
    AudioFlinger
    GPIO口配置为上拉,下拉输入
    转【Qualcomm高通音频】音效调试_录音文件播放有杂音,如何定位原因?
    转【Qualcomm高通音频】如何使用QXDM、QCAT、CoolEditor音频日志抓取、解析和分析?
    转【Qualcomm高通音频】调试工具QACT_如何新增一套音效
    转【Qualcomm高通音频】调试工具QACT_如何更换音效的音频拓扑
  • 原文地址:https://www.cnblogs.com/yangkangkang/p/5937104.html
Copyright © 2011-2022 走看看