提取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实现多行文字图片滚动效果示例代码
Oct 10 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
TS 类型收窄教程示例详解
Sep 23 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
Oracle 常见问题解答
2006/10/09 PHP
一个PHP操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
vue图片上传组件使用详解
2019/12/23 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
python在windows下实现ping操作并接收返回信息的方法
2015/03/20 Python
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
详解python里的命名规范
2018/07/16 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
在Django中实现添加user到group并查看
2019/11/18 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
异常和异常类的概念
2014/09/12 面试题
心得体会开头
2014/01/01 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
园林系毕业生求职信
2014/06/23 职场文书
运动会报道稿300字
2014/10/02 职场文书
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
员工工作能力评语
2014/12/31 职场文书
建筑工程催款函
2015/06/24 职场文书
旅游安全责任协议书
2016/03/22 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python