基于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 ');
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在VS Code中使用Snippet Craft扩展提高编码效率的过程详解
这篇文章主要介绍了在VS Code中使用Snippet Craft扩展提高编码效率,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友可以参考下2024-08-08
本文主要介绍了原生JS中Ajax的实现原理，XMLHttpRequest及promise的概念和流程。需要的朋友可以看下2016-12-12
这篇文章主要介绍了JS实现马赛克图片效果,结合完整实例形式分析了JavaScript基于HTML5 canvas图形元素绘制实现马赛克效果相关操作技巧,需要的朋友可以参考下2019-04-04
下面我的base.js中的extend函数可以允许用json格式赋值属性甚至是函数句柄2010-02-02
这篇文章主要为大家详细介绍了JavaScript实现班级抽签小程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
XML是一种标记语言,用于存储和传输数据,它是从SGML简化而来的,XML经常被用来在不同的应用程序之间或同一个应用程序的不同部分之间交换数据,同时还可以用于网络应用的数据配置和信息存储,在JavaScript中,通常有几种方法,需要的朋友可以参考下2025-01-01
项目中经常需要导出Excel文件，不在服务器端处理而是富客户端采用Javascript脚本处理数据并导出文件2014-05-05
这篇文章主要介绍了JS实现多物体运动的方法,结合实例形式较为详细的分析了javascript实现多物体运动的原理与相关操作技巧,需要的朋友可以参考下2018-01-01
这篇文章主要为大家详细介绍了Bootstrap实现模态框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了js刷新页面location.reload()用法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
最新评论