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 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
把Node.js程序加入服务实现随机启动
Jun 25 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
5个你不知道的JavaScript字符串处理库(小结)
Jun 01 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 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
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
Javascript实现图片加载从模糊到清晰显示的方法
2016/06/21 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
Python中的类与对象之描述符详解
2015/03/27 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
PyQt5多线程刷新界面防假死示例
2019/12/13 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
如何在python中实现线性回归
2020/08/10 Python
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
J2SDK1.5与J2SDK5.0有什么区别
2012/09/19 面试题
营业员个人总结的自我评价
2013/10/25 职场文书
一名女生的自荐信
2013/12/08 职场文书
中专生自我鉴定书范文
2013/12/28 职场文书
七年级音乐教学反思
2014/01/26 职场文书
小学生暑假感言
2014/02/06 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
2014年纪委工作总结
2014/12/05 职场文书
工程部岗位职责
2015/02/10 职场文书
施工员岗位职责范本
2015/04/11 职场文书
民主生活会主持词
2015/07/01 职场文书
导游词之日本富士山
2020/01/06 职场文书
golang中的并发和并行
2021/05/08 Golang
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers