星空网 > 软件开发 > Java

jquery的ready事件的实现机制浅析

页面初始化中,用的较多的就是$(document).ready(function(){//代码}); 或 $(window).load(function(){//代码});

他们的区别就是,ready是在DOM的结构加载完后就触发,load是在页面内包括DOM结构,css,js,图片等都加载完成后再触发,显然ready更适合作为页面初始化使用。但有时候也不尽然。需要进一步查看其内部机制。

那么ready的内部是如何判断DOM的结构加载完的?并且不同的浏览器的判断是如何的?

 

答案就在jquery代码内,假设jquery的版本是jquery-1.11.3.js。

ready的关键代码(3507~3566行),关键代码用红色标出:

jQuery.ready.promise = function( obj ) {  if ( !readyList ) {    readyList = jQuery.Deferred();    // Catch cases where $(document).ready() is called after the browser event has already occurred.    // we once tried to use readyState "interactive" here, but it caused issues like the one    // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15    if ( document.readyState === "complete" ) {      // Handle it asynchronously to allow scripts the opportunity to delay ready      setTimeout( jQuery.ready );    // Standards-based browsers support DOMContentLoaded    } else if ( document.addEventListener ) {      // Use the handy event callback      document.addEventListener( "DOMContentLoaded", completed, false );      // A fallback to window.onload, that will always work      window.addEventListener( "load", completed, false );    // If IE event model is used    } else {      // Ensure firing before onload, maybe late but safe also for iframes      document.attachEvent( "onreadystatechange", completed );      // A fallback to window.onload, that will always work      window.attachEvent( "onload", completed );      // If IE and not a frame      // continually check to see if the document is ready      var top = false;      try {        top = window.frameElement == null && document.documentElement;      } catch(e) {}      if ( top && top.doScroll ) {        (function doScrollCheck() {          if ( !jQuery.isReady ) {            try {              // Use the trick by Diego Perini              // http://javascript.nwbox.com/IEContentLoaded/              top.doScroll("left");            } catch(e) {              return setTimeout( doScrollCheck, 50 );            }            // detach all dom ready events            detach();            // and execute any waiting functions            jQuery.ready();          }        })();      }    }  }  return readyList.promise( obj );};

上面的代码在触发ready时可以分成两部分

1.标准浏览器下的触发 

当浏览器是基于标准浏览器时,会在加载完DOM结构后触发“DOMContentLoaded”事件,jquery内部就用此事件作为ready的触发源。

document.addEventListener( "DOMContentLoaded", completed, false );

 

2.IE浏览器下的触发

当浏览器是IE浏览器时,因为IE浏览器(蛋疼并强大着)不支持“DOMContentLoaded”事件,所以只能另谋它法,

        (function doScrollCheck() {          if ( !jQuery.isReady ) {            try {              // Use the trick by Diego Perini              // http://javascript.nwbox.com/IEContentLoaded/              top.doScroll("left");            } catch(e) {              return setTimeout( doScrollCheck, 50 );            }            // detach all dom ready events            detach();            // and execute any waiting functions            jQuery.ready();          }        })();

IE下的做法 就是上面代码的红字处,用“document.documentElement.doScroll("left")”的方法去滚动页面,如果没加载完就等个50毫秒后继续滚,直到滚的动后就触发ready。

但是,如果页面中有frame的场合,会使用window.onload事件作为ready的触发源。

所以在IE下,页面中有frame时,ready也是等到页面内的所有内容加载完成后再触发。




原标题:jquery的ready事件的实现机制浅析

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

跨境物流给跨境电商带来了哪些挑战? :https://www.goluckyvip.com/news/10222.html
运费大涨20%!美国末端派送大面积延误 :https://www.goluckyvip.com/news/10223.html
新开中东海外仓、扩容山东仓,AliExpress连开多个国内外仓库:https://www.goluckyvip.com/news/10224.html
TikTok跨境电商:品牌出海,玩转TikTok的「三个关键」:https://www.goluckyvip.com/news/10225.html
LAZADA的托管仓储代发服务有哪些优势 :https://www.goluckyvip.com/news/10226.html
Shopee托管海外仓代发服务有哪些优势 :https://www.goluckyvip.com/news/10227.html
深圳有没有比较好玩的景点 深圳有没有比较好玩的景点推荐一下:https://www.vstour.cn/a/366175.html
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流