提取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调用WebService的示例
Apr 07 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
javascript 使用 NodeList需要注意的问题
Mar 04 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
JavaScript中数组Array方法详解
Feb 27 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 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 smarty的预保留变量总结
2008/12/04 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
图片动画横条广告带上下滚动的JS代码
2013/10/25 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
基于jQuery创建鼠标悬停效果的方法
2015/03/07 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
Angular2从搭建环境到开发步骤详解
2016/10/17 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
详解webpack3编译兼容IE8的正确姿势
2017/12/21 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
express 项目分层实践详解
2018/12/10 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
layui使用label标签的方法
2019/09/14 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
[05:41]2014DOTA2西雅图国际邀请赛 小组赛7月10日TOPPLAY
2014/07/10 DOTA
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python提取页面内url列表的方法
2015/05/25 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
企业金融服务方案
2014/06/03 职场文书
2014年生活老师工作总结
2014/12/23 职场文书