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 相关文章推荐
JQUERY CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 Javascript
js密码强度实时检测代码
Mar 02 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
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
杏林同学录(六)
2006/10/09 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
ecshop添加菜单及权限分配问题
2017/11/21 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
extjs之去除s.gif的影响
2010/12/25 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
php,js,css字符串截取的办法集锦
2014/09/26 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
详解Python中的文件操作
2016/08/28 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python实现自动发送报警监控邮件
2018/06/21 Python
Python Django切换MySQL数据库实例详解
2019/07/16 Python
Python实现word2Vec model过程解析
2019/12/16 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
飞利浦法国官网:Philips法国
2019/07/10 全球购物
什么是组件架构
2016/05/15 面试题
运动会广播稿200字
2014/01/15 职场文书
新学期校长寄语
2014/01/18 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
环境整治工作方案
2014/05/18 职场文书
学校交通安全责任书
2014/08/25 职场文书
企业年会祝酒词
2015/08/11 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书