JavaScript之JS原生方法实现jQuery的ready()
2017-09-15 17:06
801 查看
浏览器加载页面的顺序:
1、 解析HTML结构
2、 加载外部脚本和样式表文件
3、 解析并执行脚本代码
4、 构造HTML DOM模型==ready()
5、 加载图片等组件
6、 页面加载完毕==onload()
ready事件是在DOM模型构造完毕时触发
load事件是在页面加载完毕后触发
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()加强版(自JavaScript权威指南)
/* * 传递函数给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);
相关文章推荐
- JS原生方法实现jQuery的ready()
- jQuery原生js实现---ready方法
- JS原生方法实现jQuery的ready()
- JS原生方法实现jQuery的ready()
- 【JS】如何用原生JS实现jQuery的ready方法
- JavaScript Tag标签切换实现的几种方法 原生js + jquery
- 【JS】怎样用原生JS实现jQuery的ready方法
- JS原生方法实现jQuery的ready()
- 原生js实现jQuery的ready方法
- JS原生方法实现jQuery的ready()
- 原生js实现复制对象、扩展对象 类似jquery中的extend()方法
- javascript 模拟JQuery的Ready方法实现并出现的问题
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
- jQuery方法原生js实现 --- siblings兄弟节点
- javascript 原生JS实现 选项卡的切换(两种方法)
- 用原生JavaScript实现jQuery的$.getJSON的解决方法
- 生JS实现jQuery的ready方法呢?下面是其中之一的做法:
- 原生JS取代一些JQuery方法的简单实现
- 习惯了使用jQuery的ajax方法,看看原生js使用xmlhttpRequest实现ajax请求
- 利用原生js和jQuery实现单选框的勾选和取消操作的方法