js 文档加载顺序、状态

最新推荐文章于 2022-06-30 07:49:38 发布

神奇大叔

最新推荐文章于 2022-06-30 07:49:38 发布

阅读量182

点赞数

分类专栏： javaScript 文章标签： javaScript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103282842

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

.onload=函数
	节点加载成功时调用
	
.onerror=函数
	节点加载失败时调用

window.onload=函数
	窗口加载完成时执行,即所有内容加载成功后执行

.readystatechange
	在状态改变时触发

.addEventListener("DOMContentLoaded",函数)
	加载domtree时候执行,优先于onload事件

加载状态
	loading  加载DOM中
	interactive	加载外部资源(解析)
	complete	加载完成

代码示例:

<html>
	<head>
		<meta charset="utf-8">
		<title>文档加载顺序</title>
	</head>
	<body>
		<img src="img/banner2.jpg" alt="" />
		
		<script>
		
			var img=document.querySelector("img");
			
			console.log(document.readyState);
			
			img.onload=function(){
				console.log("图片加载成功");
			}

			document.addEventListener("DOMContentLoaded",function(){
				console.log("domTree加载完毕");
			})
		
			document.addEventListener("readystatechange",function(){
				console.log("状态改变",document.readyState)
			})
			
			window.onload=function(){
				console.log("整个加载完成")
			}
			
		</script>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 文档加载顺序、状态

.onload=函数节点加载成功时调用 .onerror=函数节点加载失败时调用window.onload=函数窗口加载完成时执行,即所有内容加载成功后执行.readystatechange 在状态改变时触发.addEventListener("DOMContentLoaded",函数) 加载domtree时候执行,优先于onload事件加载状态 loadin...
复制链接

扫一扫