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 相关文章推荐
js getElementsByTagName的简写方式
Jun 27 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
javascript帧动画(实例讲解)
Sep 02 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
React从react-router路由上做登陆验证控制的方法
May 10 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
js通过循环多张图片实现动画效果
Dec 19 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获取毫秒级时间戳的方法
2015/04/15 PHP
PHP设置进度条的方法
2015/07/08 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
PHP设计模式之单例模式原理与实现方法分析
2018/04/25 PHP
解决PHPstudy Apache无法启动的问题【亲测有效】
2020/10/30 PHP
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
JS中正则表达式要注意lastIndex属性
2017/08/08 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
Python isinstance判断对象类型
2008/09/06 Python
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
500行python代码实现飞机大战
2020/04/24 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
给排水专业应届生求职信
2013/10/12 职场文书
农村改厕实施方案
2014/03/22 职场文书
公司委托书格式范本
2014/09/16 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
独生子女证明范本
2015/06/19 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
使用python创建股票的时间序列可视化分析
2022/03/03 Python
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js