提取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 相关文章推荐
jQuery 验证插件 Web前端设计模式(asp.net)
Oct 17 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
jQuery实现两列等高并自适应高度
Dec 22 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
详解关于element级联选择器数据回显问题
Feb 20 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
Vue实现穿梭框效果
Sep 30 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
一台收音机,让一家人都笑逐颜开!
2020/08/21 无线电
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
thinkPHP5.0框架独立配置与动态配置方法
2017/03/17 PHP
Laravel5.5 视图 - 创建视图和数据传递示例
2019/10/21 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
js中onload与onunload的使用示例
2013/08/25 Javascript
判定是否原生方法的JS代码
2013/11/12 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
2017/07/18 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
node后端服务保活的实现
2019/11/10 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python返回昨天日期的方法
2015/05/13 Python
用Python将IP地址在整型和字符串之间轻松转换
2017/03/22 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
技术总监的工作职责
2013/11/13 职场文书
上课玩手机检讨书
2014/02/08 职场文书
优良学风班申请材料
2014/02/13 职场文书
安全教育感言
2014/03/04 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
党课主持词大全
2015/06/30 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS