提取jquery的ready()方法单独使用示例


Posted in Javascript onMarch 25, 2014

大家可以使用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(){
 //这里是逻辑代码
});
Javascript 相关文章推荐
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
js中window.open打开一个新的页面
Aug 10 Javascript
javascript初学者常用技巧
Sep 02 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
JS访问SWF的函数用法实例
Jul 01 Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
小程序实现录音功能
Sep 22 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 #Javascript
jquery解析xml字符串示例分享
Mar 25 #Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 #Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 #Javascript
Jquery插件编写简明教程
Mar 25 #Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 #Javascript
jquery默认校验规则整理
Mar 24 #Javascript
You might like
实用函数2
2007/11/08 PHP
PHP中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php遍历目录输出目录及其下的所有文件示例
2014/01/27 PHP
thinkphp微信开之安全模式消息加密解密不成功的解决办法
2015/12/02 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
激活 ActiveX 控件
2006/10/09 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
JavaScript也谈内存优化
2014/06/06 Javascript
Bootstrap每天必学之js插件
2015/11/30 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
2016/05/12 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
django js 实现表格动态标序号的实例代码
2019/07/12 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
JavaScript ES 模块的使用
2020/11/12 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
python中子类调用父类函数的方法示例
2017/08/18 Python
Python中 传递值 和 传递引用 的区别解析
2018/02/22 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python try except else使用详解
2021/01/12 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
canvas需要在标签里直接定义宽高
2014/12/17 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
Solaris操作系统的线程机制
2012/12/23 面试题
项目开发计划书
2014/01/09 职场文书
文秘求职信范文
2014/04/10 职场文书
法院执行局工作总结
2015/08/11 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS