实例分享提取jquery的ready()方法
- 更新时间：2020-02-26 17:16:58
- 编辑：辛诗蕊
大家可以使用windows.onload事件，但onload在看来，就是页面上的东西（img,iframe等资源）全部都加载完毕后才能发生，如果页面内有大的图片的话，会在页面展现后好久时间后才执行。
如果只需要对DOM进行操作，那么这时就没必要等到页面全部加载了。我们需要更快的方法。Firefox有DOMContentLoaded事件可以轻松解决，可惜的就是IE没有。
MSDN关于JSCRIPT的一个方法有段不起眼的话，当页面DOM未加载完成时，调用doScroll方法时，会产生异常。那么我们反过来用，如果不异常，那么就是页面DOM加载完毕了。所以 对于Mozilla & Opera 浏览器，在dom树载入后有现成的 DOMContentLoaded 事件。对于Safari 浏览器，有document.onreadystatechange事件，当该触发时，如果 document.readyState=complete时，可视为dom树已经载入。
对于ie，当在iframe内时，同样有document.onreadystatechange事件，对于ie在非iframe内时，只有不断地通过能否执行doScroll判断dom是否加载完毕。
在本例中每间隔5毫秒尝试去执行 document.documentElement.doScroll('left')。在ie8下，貌视非iframe窗口也会有document.onreadystatechange事件，另外你也可以在构建自己的框架时使用此函数。
(function(){
var isReady=false; //判断onDOMReady方法是否已经被执行过
var readyList= [];//把需要执行的方法先暂存在这个数组里
var timer;//定时器句柄
ready=function(fn)
{
if (isReady )
fn.call( document);
else
readyList.push( function() { return fn.call(this);});
return this;
}
var onDOMReady=function(){
for(var i=0;i< readyList.length;i++)
{
readyList[i].apply(document);
}
readyList = null;
}
var bindReady = function(evt)
{
if(isReady) return;
isReady=true;
onDOMReady.call(window);
if(document.removeEventListener)
{
document.removeEventListener("DOMContentLoaded", bindReady, false);
}
else if(document.attachEvent)
{
document.detachEvent("onreadystatechange", bindReady);
if(window == window.top){
clearInterval(timer);
timer = null;
}
}
};
if(document.addEventListener){
document.addEventListener("DOMContentLoaded", bindReady, false);
}
else if(document.attachEvent)
{
document.attachEvent("onreadystatechange", function(){
if((/loaded|complete/).test(document.readyState))
bindReady();
});
if(window == window.top)
{
timer = setInterval(function(){
try
{
isReady||document.documentElement.doScroll('left');//在IE下用能否执行doScroll判断 dom是否加载完毕
}
catch(e)
{
return;
}
bindReady();
},5);
}
}
})();
使用方法如下：
ready(dosomething);//dosomething为已存在的函数
//也可以通过闭包来使用
ready(function(){
//这里是逻辑代码
});
相关教程
-
jquery中$.fn和图片滚动效果实现的必备知识总结
图片滚动效果相信大家都使用过，看上去很简单的一个效果，如果想熟练的掌握必须知道jquery、IIFE、setInterval等基础以及$.fn用法，下面这篇文章主要介绍了关于jquery中$.fn和图片滚动效果制作的
发布时间：2019-07-23
-
jquery获取css的color值返回RGB的方法
这篇文章主要介绍了jquery获取css的color值返回RGB的方法,涉及jQuery字符串正则运算与数值转换的相关技巧,需要的朋友可以参考下
发布时间：2019-07-25
-
jQuery UI开发指南
《jQuery UI开发指南》 是jQuery UI的快速开发指南，全面介绍jQuery UI如何改进HTML页面展示，内容包括jQuery UI 1.8版本的下列扩展特性：选项卡管理、折叠菜单、对话框、按钮、进度条、滑块、日历
大小：6.02 MB前端开发电子书
-
jQuery实战案例精粹
jQuery实战案例精粹 从Web开发的实际应用角度出发，结合当下热门的 jQuery插件技术，深入浅出地介绍了 jQuery高性能开发的技巧，是前端开发、设计人员的绝佳选择。 本书共 22章，介绍了 jQuer
大小：272 MBjQuery电子书
-
Bootstrap与jQuery UI框架设计
随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相
大小：180 MBjQuery电子书
-
jQuery实战
jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员，jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员，无论起点如何。本书深入介绍了整个jQuery框架，此外
大小：99.0 MBjQuery电子书
-
PHP与jQuery开发实例
这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格，探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目
大小：9.8 MBPHP开发
-
锋利的jQuery
《锋利的jQuery(第2版)》是《锋利的jQuery》升级版版，事例选用全新升级的UI，编码更合乎词义化；提升jQueryMobile的章节目录；提升jQuery版本号转变的章节目录；提升jQuery特性提升和方法的章节目
大小：194.9 MBjQuery电子书
-
JavaScript和jQuery实战手册
JavaScript可以大大改进网页的动画、交互性和视觉效果，但学习该门语言不太容易。本书通过一步步引导JavaScript基础知识，展示了如何使用jQuery（即预先写好的JavaScript代码库）来节省时间和精
大小：103 MBJavaScript电子书
-
jQuery Mobile从入门到精通
《jQuery Mobile从入门到精通》 一书以实例驱动的方式，用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识，并通过5个项目案例展现开发流程。全书分为4部分，共19章：第1部分为移动开
大小：168.7 MBjQuery
-
Web前端开发HTML5/CSS3/jQuery/AJAX从学到用完美实践
本书是著名前端开发大牛阮晓龙老师爽作，HTML5、CSS3、jQuery、AJAX一站搞定，一本真正好学、实用又精彩的书，讲述了用HTML5 CSS3设计构建网站的必备知识，欢迎下载
大小：167.1 MBWeb前端电子书
