基于javascript原生判断DOM是否加载完毕


Posted in Javascript onOctober 14, 2020

readyState

document.readyState 返回当前文档的状态,属性如下:

  • uninitialized 还未开始加载
  • loading 加载中
  • interactive 已加载,文档与用户可以开始交互
  • complete 加载完成

DOMContentLoaded

当 DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片,flash

onload

当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了

根据执行时DOM是否已经装载完毕来决定是对回调函数进行同步调用还是异步调用。具体代码如下:

function onReady(fn){
  var readyState = document.readyState;
  if(readyState === 'interactive' || readyState === 'complete') {
  fn()
 }else{
   window.addEventListener("DOMContentLoaded",fn);
  }

}

onReady(function(){
 console.log('DOM fully loaded and parsed ');
 })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js读取cookie方法总结
Oct 31 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
javascript事件冒泡实例分析
May 13 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 #Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 #Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 #Javascript
原生JS实现相邻月份日历
Oct 13 #Javascript
jquery简易手风琴插件的封装
Oct 13 #jQuery
原生js实现照片墙效果
Oct 13 #Javascript
js轮播图之旋转木马效果
Oct 13 #Javascript
You might like
天使彦史上最神还原,性别曝光的那一刻,百万网友恋爱了
2020/03/02 国漫
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
php接口与接口引用的深入解析
2013/08/09 PHP
php实现的支持断点续传的文件下载类
2014/09/23 PHP
thinkphp备份数据库的方法分享
2015/01/04 PHP
读jQuery之五(取DOM元素)
2011/06/20 Javascript
33个优秀的 jQuery 图片展示插件分享
2012/03/14 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
javascript 回调函数详解
2014/11/11 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
JS中如何实现复选框全选功能
2016/12/19 Javascript
JavaScript设计模式之调停者模式实例详解
2018/02/03 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
jQuery加PHP实现图片上传并提交的示例代码
2020/07/16 jQuery
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python微信公众号开发平台
2018/01/25 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
Django 静态文件配置过程详解
2019/07/23 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Win10里python3创建虚拟环境的步骤
2020/01/31 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
美国药妆网站:EDCskincare.com(防晒、痤疮、抗衰老等)
2017/04/28 全球购物
金融行业务员的自我评价
2013/12/13 职场文书
学习自我鉴定
2014/02/01 职场文书
平面设计专业求职信
2014/08/09 职场文书
顶岗实习协议书
2015/01/29 职场文书
何玥事迹观后感
2015/06/16 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis