提取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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php利用云片网实现短信验证码功能的示例代码
2017/11/18 PHP
如何在PHP中使用数组
2020/06/09 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
2017/03/28 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
python 字典(dict)按键和值排序
2016/06/28 Python
Python实现的密码强度检测器示例
2017/08/23 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
python3.6使用pymysql连接Mysql数据库
2018/05/25 Python
Random 在 Python 中的使用方法
2018/08/09 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
pytorch中的inference使用实例
2020/02/20 Python
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
老师给学生的表扬信
2014/01/17 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
《我的第一本书》教学反思
2014/02/15 职场文书
奉献演讲稿范文
2014/05/21 职场文书
安全目标责任书
2014/07/22 职场文书
小学校长汇报材料
2014/08/20 职场文书
学前班语言教学计划
2015/01/20 职场文书
会议通知
2015/04/15 职场文书
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS