原生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 相关文章推荐
纯JavaScript实现的完美渐变弹出层效果代码
Apr 02 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
jQuery层次选择器选择元素使用介绍
Apr 18 Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
js实现抽奖效果
Mar 27 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
JS实现简易留言板(节点操作)
Mar 16 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
Aug 31 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 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
留言板翻页的实现详解
2006/10/09 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
2017/03/29 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
python中map()函数的使用方法示例
2017/09/29 Python
Python实现的基于优先等级分配糖果问题算法示例
2018/04/25 Python
python微信好友数据分析详解
2018/11/19 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
Python Django给admin添加Action的方法实例详解
2019/04/29 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
Python3离线安装Requests模块问题
2019/10/13 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
python palywright库基本使用
2021/01/21 Python
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
Servlet方面面试题
2016/09/28 面试题
英语系本科生求职信
2014/07/15 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
中秋节祝酒词
2015/08/12 职场文书
初中语文教学随笔
2015/08/15 职场文书
实用求职信模板范文
2019/05/13 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS