JS原生方法实现jQuery的ready()
浏览器加载页面的顺序:
1、 解析HTML结构
2、 加载外部脚本和样式表文件
3、 解析并执行脚本代码
4、 构造HTML DOM模型==ready()
5、 加载图片等组件
6、 页面加载完毕==onload()
ready事件是在DOM模型构造完毕时触发
load事件是在页面加载完毕后触发
function ready(fn) { if (document.addEventListener) { document.addEventListener(‘DOMContentLoaded‘, function () { //注销事件, 避免反复触发 document.removeEventListener(‘DOMContentLoaded‘, arguments.callee, false); fn(); //执行函数 }, false); } else if (document.attachEvent) { //IE document.attachEvent(‘onreadystatechange‘, function () { if (document.readyState == ‘complete‘) { document.detachEvent(‘onreadystatechange‘, arguments.callee); fn(); //函数执行 } }); } };
ready()加强版
/* * 传递函数给whenReady() * 当文档解析完毕且为操作准备就绪时,函数作为document的方法调用 */ var whenReady = (function () { //这个函数返回whenReady()函数 var funcs = []; //当获得事件时,要运行的函数 var ready = false; //当触发事件处理程序时,切换为true //当文档就绪时,调用事件处理程序 function handler(e) { if (ready) return; //确保事件处理程序只完整运行一次 //如果发生onreadystatechange事件,但其状态不是complete的话,那么文档尚未准备好 if (e.type === ‘onreadystatechange‘ && document.readyState !== ‘complete‘) { return; } //运行所有注册函数 //注意每次都要计算funcs.length //以防这些函数的调用可能会导致注册更多的函数 for (var i = 0; i < funcs.length; i++) { funcs[i].call(document); } //事件处理函数完整执行,切换ready状态, 并移除所有函数 ready = true; funcs = null; } //为接收到的任何事件注册处理程序 if (document.addEventListener) { document.addEventListener(‘DOMContentLoaded‘, handler, false); document.addEventListener(‘readystatechange‘, handler, false); //IE9+ window.addEventListener(‘load‘, handler, false); } else if (document.attachEvent) { document.attachEvent(‘onreadystatechange‘, handler); window.attachEvent(‘onload‘, handler); } //返回whenReady()函数 return function whenReady(fn) { if (ready) { fn.call(document); } else { funcs.push(fn); } } })(); //--------------------- test ----- function t1() { console.log(‘t1‘); } function t2() { console.log(‘t2‘); } // t2-t1-t2 whenReady(t1); t2(); whenReady(t2);
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。