domReady的实现案例


Posted in Javascript onNovember 23, 2016

我们都知道JQ的 $(document).ready(fn) 方法。可以在页面准备就绪后才执行脚本,该方法相比传统的window.onload 事件,它的优势体现于onload事件是需要等到页面中所有资源都加载完毕后才会触发,而JQ的ready方法则会判断DOM树是否构建完毕。

onload相比较onreadystate事件的区别是,onreadystatechange事件是IE独有的,并且在IE11之后不再支持,该事件是IE浏览器为特定的需要判断资源加载的DOM元素指定的事件。

支持onreadystatechange事件的DOM元素必然有一个readyState属性,该属性的返回值,用于说明资源的加载情况。

一般而言,onreadystatechange事件更多用于Iframe的加载判断。

最后我们需要了解的是当页面包含iframe后,DOM树的生成,以及DOMContentLoaded事件的触发,onload事件的触发,其流程对于IE非IE是不同的。

一般来说:

IE :解析index页面 -> 解析iframe页面 -> 触发iframe的DOMContentLoaded事件 -> 触发iframe页面 onload事件 -> 触发Index页面的DOMContentLoaded事件 -> 触发index页面的onload事件。

!IE:解析index页面 -> 触发index页面的DOMContentLoaded事件 -> 解析iframe页面 -> 触发iframe页面的DOMContentLoaded事件 -> 触发iframe的onload事件 -> 触发index页面的onload事件。

从这个流程,我们可以看出IE中,必须等待当前页面的iframe加载解析完毕,当前页面才能加载解析完毕,而在非IE中,iframe的加载与解析对当前页面来言更多的是异步执行。

下面是具体的代码:

(function(win){

  'use strict';

  var document = win.document,
    readList = [],    // 等待执行的函数堆栈
    flag = false;

  var removeEvent = function(){

    if(document.addEventListenner){
      window.removeEventListenner('load',handle,false);
    }else if(document.attachEvent){
      window.detachEvent('onload',handle)
      document.detachEvent('onreadystatechange',readyState);
    }else{
      window.onload = null;
    }

  },
  handle = function(){

    if(!flag){
      
      while(readList.length){  
        readList[0].call();  //执行函数
        readList.shift();  //删除第一个数组元素
      }
      flag = true;
      removeEvent();
    }

  },
  readyState = function(){
    if(document.readyState == 'complete'){
      handle();
    }  
  },
  DOMContentloaded=function(){

    if(document.readyState == 'complete'){
      setTimeout(handle);  // setTimeout 会使用最短时间,该时间不同系统并不一样。
    }else if(document.addEventListenner){
      document.addEventListenner('DOMContentLoaded',fn,false);
      window.addEventListenner('load',handle,false);
    }else if(document.attachEvent){
      window.attachEvent('onload',handle);
      document.attachEvent('onreadystatechange',readyState);  //onreadystatechange 事件在页面中含有iframe的时候,它会等待iframe加载完毕才会触发。
      
      if(self === self.top){  // 当页面不在iframe中则使用此种方式检测doScroll方法是否可用。如果再iframe中则用onreadstatechange事件进行判断。
        (function(){
          try{
            document.documentElement.doScroll('left');
          }catch(e){
            setTimeout(arguments.callee,50);  //arguments.callee 是对当前函数的引用。
            return ;
          }
          handle();
        }());
      }

    }else{
      window.onload = handle;
    }
  },
  ready = function(fn){
    readList.push(fn);  // 加入待处理的堆栈中。
    DOMContentloaded();
  };

  win.domReady = ready;


}(window));

代码调用:

domReady(function(){
   document.getElementById('box').innerHTML = (new Date().getTime() - date)/1000;
 });

以上这篇domReady的实现案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
JavaScript 事件系统
Jul 22 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
javascript在IE下trim函数无法使用的解决方法
Sep 12 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
代码解析React中setState同步和异步问题
Jun 03 Javascript
BootStrap按钮标签及基本样式
Nov 23 #Javascript
JavaScript仿百度图片浏览效果
Nov 23 #Javascript
Asp.Net之JS生成分页条的方法
Nov 23 #Javascript
javascript判断firebug是否开启的方法
Nov 23 #Javascript
JavaScript表单验证开发
Nov 23 #Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 #Javascript
分类解析jQuery选择器
Nov 23 #Javascript
You might like
php自动加载的两种实现方法
2010/06/21 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php轻松实现文件上传功能
2016/03/03 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
xml转json的js代码
2012/08/28 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
Python 的 Socket 编程
2015/03/24 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python 经典面试题 21 道【不可错过】
2018/09/21 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
Pyqt5 关于流式布局和滚动条的综合使用示例代码
2020/03/24 Python
解决python3.6用cx_Oracle库连接Oracle的问题
2020/12/07 Python
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
企业爱心捐款倡议书
2015/04/27 职场文书
大学生支教感言
2015/08/01 职场文书
放假通知怎么写
2015/08/18 职场文书
2019财务毕业实习报告
2019/06/27 职场文书
Vue如何清空对象
2022/03/03 Vue.js