提取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 相关文章推荐
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
微信小程序实现图片预览功能
Jan 31 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 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
ThinkPHP缓存方法S()概述
2014/06/13 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
JavaScript中instanceof运算符的使用示例
2016/06/08 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
详解React项目中碰到的IE问题
2019/03/14 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python3开发实例之非关系型图数据库Neo4j安装方法及Python3连接操作Neo4j方法实例
2020/03/18 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
是否有自动比较结构的方法
2015/06/03 面试题
交通安全寄语大全
2014/04/08 职场文书
学校个人对照检查材料
2014/08/26 职场文书
2014幼儿园家长工作总结
2014/11/10 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
2015年纪委工作总结
2015/05/13 职场文书
校运会宣传稿大全
2015/07/23 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang