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

更新时间：2020年10月14日 09:21:45 作者：酷儿q

这篇文章主要介绍了基于javascript原生判断DOM是否加载完毕,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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 ');
 })

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js实现网页计算器
这篇文章主要为大家详细介绍了js实现网页计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
countup.js实现数字动态叠加效果
这篇文章主要为大家详细介绍了countup.js实现数字动态叠加效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-10-10
基于JavaScript实现表格隔行换色
这篇文章主要介绍了基于JavaScript实现表格隔行换色,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
动态加载css方法实现和深入解析
本文主要介绍了动态加载css的方法实现和深入解析。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
JavaScript生成图形验证码
这篇文章主要为大家详细介绍了JavaScript生成图形验证码的相关代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
返回上一个url并刷新界面的js代码
要返回上一页再刷新页面我们用到最多的是在像php,asp,jsp,asp.net中，下面我来给大家先介绍js 返回前一页并刷新页面，然后再把这些代码放在php中实现删除后返回当前页面并刷新页面
2020-09-09
JS基础之undefined与null的区别分析
在JavaScript开发中，被人问到：null与undefined到底有啥区别？一时间不好回答，特别是undefined，因为这涉及到undefined的实现原理。
2011-08-08
uniapp小程序实战之利用腾讯地图获取定位
使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发布到ios,android,web以及各种小程序,快应用等多个平台,下面这篇文章主要给大家介绍了关于uniapp小程序实战之利用腾讯地图获取定位的相关资料,需要的朋友可以参考下
2023-02-02
总结两个Javascript的哈稀对象的一些编程技巧
总结两个Javascript的哈稀对象的一些编程技巧...
2007-04-04
js中递归函数的使用介绍
所谓的递归函数就是在函数体内调用本函数。使用递归函数一定要注意，处理不当就会进入死循环。递归函数只有在特定的情况下使用，比如阶乘问题
2012-10-10