您好,欢迎访问一九零五行业门户网

jQuery的ready方法实现原理分析

jquery中的ready方法实现了当页面加载完成后才执行的效果,但他并不是window.onload或者doucment.onload的封装,而是使用 标准w3c浏览器dom隐藏api和ie浏览器缺陷来完成的,首先,我们来看jquery的代码
domcontentloaded = function() { //取消事件监听,执行ready方法 if ( document.addeventlistener ) { document.removeeventlistener( "domcontentloaded", domcontentloaded, false ); jquery.ready(); } else if ( document.readystate === "complete" ) { document.detachevent( "onreadystatechange", domcontentloaded ); jquery.ready(); } };
jquery.ready.promise = function( obj ) { if ( !readylist ) { readylist = jquery.deferred(); //表示页面已经加载完成,直接调用 ready方法 if ( document.readystate === "complete" ) { //将 jquery.ready压入异步消息队列,设置延迟时间1毫秒(注意,有些浏览器延迟不能小于4毫秒) settimeout( jquery.ready); } else if ( document.addeventlistener ) // { //监听dom加载完成 document.addeventlistener( "domcontentloaded", domcontentloaded, false ); //这里是为了确保所有ready执行结束,如果domcontentloaded方法执行了,将有一个状态值 isready被设置为true,因此, //ready方法一旦执行,那么将只执行一次,window.addeventlistener中的ready 将被 return 中断 window.addeventlistener( "load", jquery.ready, false ); } else { //低版本的ie浏览器 document.attachevent( "onreadystatechange", domcontentloaded ); window.attachevent( "onload", jquery.ready ); var top = false; try { top = window.frameelement == null && document.documentelement; } catch(e) {} if ( top && top.doscroll ) //剔除iframe的成分 { (function doscrollcheck() { if ( !jquery.isready ) { try { //根据bug来兼容低版本的ie http://javascript.nwbox.com/iecontentloaded/ top.doscroll("left"); } catch(e) { //由于低版本的ie 浏览器,onreadystatechange事件不可靠,因此需要根据各个bug来判断页面是否已加载完成 return settimeout( doscrollcheck, 50 ); } jquery.ready(); } })(); } } } return readylist.promise( obj ); };
ready: function( wait ) { if ( wait === true ? --jquery.readywait : jquery.isready ) { //判断页面是否已完成加载并且是否已经执行ready方法 return; } if ( !document.body ) { return settimeout( jquery.ready ); } jquery.isready = true; //指示ready方法已被执行 if ( wait !== true && --jquery.readywait > 0 ) { return; } readylist.resolvewith( document, [ jquery ] ); if ( jquery.fn.trigger ) { jquery( document ).trigger("ready").off("ready"); } },
其它类似信息

推荐信息