提取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 相关文章推荐
各浏览器对click方法的支持差异小结
Jul 31 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
JQuery页面地址处理插件jqURL详解
May 03 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
AngularJS过滤器filter用法总结
Dec 13 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
vue实现购物车列表
Jun 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
PHP简单的MVC框架实现方法
2015/12/01 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
js实现日期级联效果
2014/01/23 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
Python下singleton模式的实现方法
2014/07/16 Python
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Python用模块pytz来转换时区
2016/08/19 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
Python创建临时文件和文件夹
2020/08/05 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
php优化查询foreach代码实例讲解
2021/03/24 PHP
领导证婚人证婚词
2014/01/13 职场文书
优秀电子工程系毕业生求职信
2014/05/24 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
中班下学期个人总结
2015/02/12 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
Python数据分析之pandas读取数据
2021/06/02 Python
基于Python实现股票收益率分析
2022/04/02 Python
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL