提取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 相关文章推荐
Track Image Loading效果代码分析
Aug 13 Javascript
xml分页+ajax请求数据源+dom取结果实例代码
Oct 31 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
Oct 31 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
axios实现简单文件上传功能
Sep 25 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
Vue实现圆环进度条的示例
Feb 06 Vue.js
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 zlib压缩和解压缩swf文件的代码
2008/12/30 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
字符串的replace方法应用浅析
2011/12/06 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python数据类型学习笔记
2016/01/13 Python
python3实现windows下同名进程监控
2018/06/21 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
python代码xml转txt实例
2020/03/10 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
本科生详细的自我评价
2013/09/19 职场文书
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
MySQL分区路径子分区再分区
2022/04/13 MySQL
python实现商品进销存管理系统
2022/05/30 Python
springboot实现string转json json里面带数组
2022/06/16 Java/Android