原生JS实现DOM加载完成马上执行JS代码的方法


Posted in Javascript onSeptember 07, 2018

用原生JS我们经常使用window.onload事件来加载页面。但是window.onload是在页面元素都加载完毕后才执行,如果页面内有大的图片的话,会在页面展现后好久时间后才执行。所以有时我们需要在DOM载入时马上执行一些函数。jQuery提供了document.ready方法用来代替window.onload。但又不愿意仅为了这一个需求而引入整个JQuery库,于是就把jQuery的方法提取出来,单独使用了。

如果只需要对DOM进行操作,那么这时就没必要等到页面全部加载了。Firefox有DOMContentLoaded事件可以轻松解决,可惜的就是IE没有。

MSDN关于JSCRIPT的一个方法有段不起眼的话,当页面DOM未加载完成时,调用doScroll方法时,会产生异常。那么我们反过来用,如果不异常,那么就是页面DOM加载完毕了。所以 对于Mozilla & Opera 浏览器,在dom树载入后有现成的 DOMContentLoaded 事件。对于Safari 浏览器,有document.onreadystatechange事件,当该触发时,如果 document.readyState=complete时,可视为dom树已经载入。

对于ie,当在iframe内时,同样有document.onreadystatechange事件,对于ie在非iframe内时,只有不断地通过能否执行doScroll判断dom是否加载完毕。

在本例中每间隔5毫秒尝试去执行 document.documentElement.doScroll(‘left')。在ie8下,貌视非iframe窗口也会有 document.onreadystatechange事件,另外也可以在构建自己的框架时使用此函数。

(function(){
  var isReady=false; //判断onDOMReady方法是否已经被执行过
  var readyList= [];//把需要执行的方法先暂存在这个数组里
  var timer;//定时器句柄
 
  ready=function(fn)
  {
   if (isReady )
    fn.call( document);
   else
    readyList.push( function() { return fn.call(this);});
   return this;
  }
 
  var onDOMReady=function(){
   for(var i=0;i< readyList.length;i++)
   {
    readyList[i].apply(document);
   }
   readyList = null;
  }
 
  var bindReady = function(evt)
  {
   if(isReady) return;
   isReady=true;
   onDOMReady.call(window);
   if(document.removeEventListener)
   {
    document.removeEventListener("DOMContentLoaded", bindReady, false);
   }
   else if(document.attachEvent)
   {
    document.detachEvent("onreadystatechange", bindReady);
    if(window == window.top){
     clearInterval(timer);//事件发生后清除定时器
     timer = null;
    }
   }
  };
 
  if(document.addEventListener){
   document.addEventListener("DOMContentLoaded", bindReady, false);
  }
  else if(document.attachEvent)//非最顶级父窗口
 
  {
   document.attachEvent("onreadystatechange", function(){
    if((/loaded|complete/).test(document.readyState))
    bindReady();
   });
 
  if(window == window.top)//在应用有frameset或者iframe的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe)
  {
   timer = setInterval(function(){
    try
    {
     isReady||document.documentElement.doScroll('left');//在IE下用能否执行doScroll判断 dom是否加载完毕
    }
    catch(e)
    {
     return;
    }
    bindReady();
   },5);
  }
  }
 })();

下面是使用方法:

ready(dosomething);//dosomething为已存在的函数
 //也可以通过闭包来使用
 ready(function(){
  //这里是逻辑代码
 });

以上这篇原生JS实现DOM加载完成马上执行JS代码的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
Dec 20 Javascript
jquery动态增加text元素以及删除文本内容实例代码
Jul 01 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 Javascript
利用python分析access日志的方法
Oct 26 Javascript
Angularjs实现分页和分页算法的示例代码
Dec 23 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
原生js实现分页效果
Sep 23 Javascript
vue加载完成后的回调函数方法
Sep 07 #Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 #Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 #Javascript
详解JavaScript事件循环机制
Sep 07 #Javascript
解决vue 引入子组件报错的问题
Sep 06 #Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 #Javascript
vue 解决循环引用组件报错的问题
Sep 06 #Javascript
You might like
php批量删除数据
2007/01/18 PHP
ZF等常用php框架中存在的问题
2008/01/10 PHP
PHP教程 基本语法
2009/10/23 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
微信小程序登录换取token的教程
2018/05/31 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
Python内置函数property()如何使用
2020/09/01 Python
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
2013年学期结束动员演讲稿
2014/01/07 职场文书
交通事故检查书范文
2014/01/30 职场文书
幼儿生日活动方案
2014/08/27 职场文书
个人自我剖析材料
2014/09/30 职场文书
帝企鹅日记观后感
2015/06/10 职场文书
工程进度款催款函
2015/06/24 职场文书
公司人事管理制度
2015/08/05 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python