基于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版网站风格切换实例代码
Oct 06 Javascript
jquery改变tr背景色的示例代码
Dec 28 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
input点击后placeholder中的提示消息消失
Jan 15 Javascript
jQuery取消特定的click事件
Feb 29 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
深入理解javascript函数参数与闭包
Dec 12 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
浅析Vue中拆分视图层代码的5点建议
Aug 15 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
如何把PHP转成EXE文件
2006/10/09 PHP
用PHP和ACCESS写聊天室(四)
2006/10/09 PHP
php框架Phpbean说明
2008/01/10 PHP
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
用PHP实现弹出消息提示框的两种方法
2013/12/17 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
php把文件设置为插件的技巧方法
2020/02/03 PHP
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
javascript常用方法汇总
2014/12/02 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
详解Jest结合Vue-test-utils使用的初步实践
2019/06/27 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
如何基于Python实现数字类型转换
2020/02/07 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
在线课程:Skillshare
2019/04/02 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
体育教师工作总结的自我评价
2013/10/10 职场文书
教师学习培训邀请函
2014/02/04 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
python使用glob检索文件的操作
2021/05/20 Python
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android