首页 > 代码库 > JS原生方法实现jQuery的ready()
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-t2whenReady(t1);t2();whenReady(t2);
JS原生方法实现jQuery的ready()
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。