发文章
发文工具
撰写
网文摘手
文档
视频
思维导图
随笔
相册
原创同步助手
其他工具
图片转文字
文件清理
AI助手
留言交流
jQuery中的ready事件原型,在这里提取出来便于理解,代码+注释 如下:
// 事件队列 var EventQueue = null; // 是否已经执行过了,只执行一次 var isFire = false; //添加ready事件 function addReadyEvent(fn){ if(!EventQueue) EventQueue = []; if(document.readyState == 'complete'){ fn(); }else{ EventQueue.push(fn); } } // 触发ready事件 function fireReadyEvent(){ if(!isFire){ var fn,i=0; if(EventQueue){ while(fn = EventQueue[i]){ fn(); i++; } EventQueue = null; } isFire = true; } } // 绑定ready事件 function bindReady(){ if(document.addEventListener){ // 标准浏览器DOM加载完毕后执行队列,并卸载事件 document.addEventListener('DOMContentLoaded',unbindReady,false); // 确保会执行 window.addEventListener('load',fireReadyEvent,false); }else if(document.attachEvent){ // IE浏览器加载事件变化的时候执行unbindReady document.attachEvent('onreadystatechange',unbindReady); // 确保会执行 window.attachEvent('onload',fireReadyEvent); } var toplevel = false; // 是否顶层对象 try { toplevel = window.frameElement == null; } catch(e) {} if ( document.documentElement.doScroll && toplevel ) { // IE通过判断doScroll,在onreadystatechange = 'complete' 之前执行 doScrollCheck(); } } function doScrollCheck() { if ( isFire ) { return; } try { // IE下加载BODY后即可正常执行doScroll() document.documentElement.doScroll("left"); } catch( error ) { // 循环执行doScroll setTimeout( doScrollCheck, 1 ); return; } // doScroll成功后执行队列 fireReadyEvent(); } // 移除绑定事件并执行队列 function unbindReady(){ if(document.addEventListener){ //标准浏览器支持DOMContentLoaded事件 document.removeEventListener('DOMContentLoaded',unbindReady,false); fireReadyEvent(); }else if(document.attachEvent){ if(document.readyState === 'complete'){ // IE浏览器支持complete事件 document.detachEvent('onreadystatechange',unbindReady); fireReadyEvent(); } } } bindReady(); window.onload = function(){ console.log('LOAD加载完毕!'); } addReadyEvent(function(){ console.log('DOM加载完毕1!'); }); addReadyEvent(function(){ console.log('DOM加载完毕22!'); }) addReadyEvent(function(){ console.log('DOM加载完毕33!'); })
来自: 昵称10504424 > 《Jquery》
0条评论
发表
请遵守用户 评论公约
document.ready事件和document.load事件的区别
document.ready事件和document.load事件的区别 document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文...
[Python爬虫] 在Windows下安装PhantomJS和CasperJS及入门介绍(上)
下载地址:http://phantomjs.org/ 官网介绍: PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fa...
jQuery加载JS的不同的方式
jQuery加载JS的不同的方式?//与上面相对应的jQuery中第一种页面加载的事件$(window).load(function () { console.log("小苏好猥琐哦");});以上两种方式效果相同,都是在页面全部加载完毕才触...
JavaScript 判断 DOM 何时加载完毕
HTML解析完毕外部脚本和样式表加载完毕脚本在文档内解析并执行HTML DOM完全构造起来图片和外部内容加载网页完成加载。// 监听 DOM 是否可用的函数function domReady(f) { // 假如DOM已经加载,马山执行...
学习JQuery的$.Ready()与OnLoad事件比较[转]
学习JQuery的$.Ready()与OnLoad事件比较[转]在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里.对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:1.加载多...
JavaScript前端开发案例教程-第11章 jQuery
// $的使用$(''''div'''').hide();// jQuery的使用jQu ery(''''div'''').hide();11.1.4 jQuery对象jQuery顶级对象与jQuery对象的关...
jQuery之$(document).ready()使用介绍
jQuery之$(document).ready()使用介绍 学习jQuery的第一件事是:如果你想要一个事件运行在你的页面上,你必须在$(document).ready()里调用这个事件。所有包括在$(document).ready()里面的元素或事件都...
JavaScript连载27-文档加载模式以及元素获取
JavaScript连载27-文档加载模式以及元素获取一、文档加载模式1.事件。事件处理程序(事件出发后要执行的代码函数形式)存在问题:浏览器加载一个页面的时候,是按照自上而下的顺序加载的,若将script标...
基础核心
基础核心 在jQuery程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“$”来起始的。而很多库,比如prototype、还有我们JavaScript 课程开发的Base 库,都使用“$”作为基准起始符...
微信扫码,在手机上查看选中内容