提取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 相关文章推荐
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 Javascript
vue--vuex详解
Apr 15 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
vscode中使用npm安装babel的方法
Aug 02 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
解析php中heredoc的使用方法
2013/06/17 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
php实现根据IP地址获取其所在省市的方法
2015/04/30 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
浅析javascript闭包 实例分析
2010/12/25 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
Javascript函数中的arguments.callee用法实例分析
2016/09/16 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
PAUL HEWITT手表美国站:德国北部时尚生活配饰品牌,船锚元素
2017/11/18 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
常见的软件开发流程有哪些
2015/11/14 面试题
学习十八大演讲稿
2014/09/15 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
2014年工商所工作总结
2014/12/09 职场文书
文明家庭事迹材料
2014/12/20 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
上下班时间调整通知
2015/04/23 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
2016年员工政治思想表现评语
2015/12/02 职场文书
导游词之清晏园
2019/11/22 职场文书