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 相关文章推荐
执行iframe中的javascript方法
Oct 07 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
javascript解三阶幻方(九宫格)
Apr 22 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
AngularJS实践之使用NgModelController进行数据绑定
Oct 08 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
Jan 12 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
ant-design表单处理和常用方法及自定义验证操作
Oct 27 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
react如何快速设置文件路径别名
Apr 28 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
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
js实现的复制兼容chrome和IE
2014/04/03 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
2014/10/17 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
2017/07/15 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
Webpack path与publicPath的区别详解
2018/05/03 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
简化Python的Django框架代码的一些示例
2015/04/20 Python
Django中几种重定向方法
2015/04/28 Python
Python入门之modf()方法的使用
2015/05/15 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
会计学个人自荐信模板
2013/12/13 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
给校长的建议书600字
2014/05/15 职场文书