提取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 相关文章推荐
javascript 对象比较实现代码
Apr 27 Javascript
jquery键盘事件使用介绍
Nov 01 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
Dec 28 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
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
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
单击按钮显示隐藏子菜单经典案例
2013/01/04 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
jquery选择器使用详解
2014/04/08 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
基于jQuery实现左侧菜单栏可折叠功能
2016/12/27 Javascript
简单实现js无缝滚动效果
2017/02/05 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
NumPy排序的实现
2020/01/21 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
美国韩国化妆品和护肤品购物网站:Beautytap
2018/07/29 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
承诺书模板
2014/08/30 职场文书
机关领导干部作风整顿整改措施
2014/09/19 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
2015年班组长工作总结
2015/04/10 职场文书
工程技术员岗位职责
2015/04/11 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
高中政治教学反思
2016/02/23 职场文书
责任书格式
2019/04/18 职场文书