今天闲来无事研究研究jquery.ready()的内部实现,看JQ的源码一头雾水,由于自己很菜了,于是翻了翻牛人的播客,讲述详细,收获颇多。
先普及一下jquery.ready()和window.onload,window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发.
我的ready方法写了2版,借鉴了不少前辈的代码,先上代码。
代码2.0问世,代码如下
var $ = ready = window.ready = function(fn){ if(document.addEventListener){//兼容非IE document.addEventListener("DOMContentLoaded",function(){ //注销事件,避免反复触发 document.removeEventListener("DOMContentLoaded",arguments.callee,false); fn();//调用参数函数 },false); }else if(document.attachEvent){//兼容IE IEContentLoaded (window, fn); } function IEContentLoaded (w, fn) { var d = w.document, done = false, // only fire once init = function () { if (!done) { done = true; fn(); } }; // polling for no errors (function () { try { // throws errors until after ondocumentready d.documentElement.doScroll(‘left‘); } catch (e) { setTimeout(arguments.callee, 50); return; } // no errors, fire init(); })(); // trying to always fire before onload d.onreadystatechange = function() { if (d.readyState == ‘complete‘) { d.onreadystatechange = null; init(); } }; } } ready(function(){alert(1)})