JS原生方法实现jQuery的ready()
2023-09-14 08:57:37 时间
浏览器加载页面的顺序:
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);
相关文章
- 使用 Dapr JS SDK 让 Nest.js 集成 Dapr(微软开源的分布式应用程序运行时)
- js怎么让指定方法先后顺序_jquery固定table表头
- js中moment方法_jquery 虚拟dom
- 【源码】PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
- Js/Jquery获取iframe中的元素 在Iframe中获取父窗体的元素方法详解数据库
- jQuery图片切换插件jquery.cycle.js详解编程语言
- 使用CDN加载jQuery.js
- JavaScript探索之旅掌握Oracle和JS的完美融合(js与oracle)
- 用js模拟JQuery的show与hide动画函数代码
- 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
- jquery全选/全不选/反选另一种实现方法(配合原生js)
- 基于jquery实现拆分姓名的方法(纯JS版)
- 使用js+jquery实现无限极联动
- jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
- 浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
- jQuery避免$符和其他JS库冲突的方法对比
- jquery库或JS文件在eclipse下报错问题解决方法
- 三种动态加载js的jquery实例代码另附去除js方法
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- jQuery及JS实现循环中暂停的方法