提取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 相关文章推荐
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
原始的js代码和jquery对比体会
Sep 10 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
Vue props 单向数据流的实现
Nov 06 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
什么是短波收听SWL
2021/03/01 无线电
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
win10 apache配置虚拟主机后localhost无法使用的解决方法
2018/01/27 PHP
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
js加密解密字符串可自定义密码因子
2014/05/13 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
jquery实现ajax加载超时提示的方法
2016/07/23 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
Python isinstance函数介绍
2015/04/14 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
Python: 传递列表副本方式
2019/12/19 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
MADE法国:提供原创设计师家具
2018/09/18 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
小学生检讨书大全
2014/02/06 职场文书
年会搞笑主持词串词
2014/03/24 职场文书
2014年残疾人工作总结
2014/12/06 职场文书
爱心募捐感谢信
2015/01/22 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
世界遗产的导游词
2015/02/13 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
win11怎么消除图标小盾牌?win11消除图标小盾牌解决方法
2022/08/05 数码科技