js 文档加载顺序、状态

拼搏现实的明天。 2021-07-25 01:08 394阅读 0赞

.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 条评论，394人围观）

还没有评论，来说两句吧...

相关阅读

相关 html+js+控制方法执行顺序,javascript 动态加载按顺序加载运行 js

![81699303fb800582ee6b4fc86323ed24.png][] 文章目录 javascript 在浏览器中的加载是如何的? 如何你的 script 上

太过爱你忘了你带给我的痛/ 2022年10月06日 10:50/ 0 赞/ 254 阅读

相关类加载顺序

有两个类Parent son <table> <tbody> <tr> <td> <div> 1 </div>

ゞ浴缸里的玫瑰/ 2022年07月14日 08:58/ 0 赞/ 276 阅读

相关 js的加载顺序

1. js 放在 `<head>`标签中会立即执行，阻塞后续资源的下载与执行。因为js有可能会操作DOM，如果不阻塞后续的资源下载，DOM的操作顺序不可控。如果外部脚

骑猪看日落/ 2022年05月16日 12:05/ 0 赞/ 193 阅读

相关类加载顺序

目录一、类加载做了哪些事？二、类加载的顺序三、一个具体说明的例子四、类加载前和加载后的执行顺序（转自http://blog.csdn.net/mrzhoug/a

我会带着你远行/ 2022年05月10日 09:50/ 0 赞/ 380 阅读

相关 html，js，css加载顺序

1.首先要了解页面的结构（包含哪些元素？哪些计算机语言能够在页面中运行）（1）html 不仅可以包含文字，还可以包含图片、链接，甚至音乐、程序等非文字

淡淡的烟草味﹌/ 2022年05月10日 08:26/ 0 赞/ 254 阅读

相关 JS的并行加载与执行顺序

JavaScript文件（下面简称脚本文件）需要被html文件引用才能在浏览器中运行。在html文件中可以通过不同的方式来引用脚本文件，我们需要关注的是，这些方式的具体实现和

清疚/ 2022年01月15日 19:55/ 0 赞/ 298 阅读

相关 js 文档加载顺序、状态

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

拼搏现实的明天。/ 2021年07月25日 01:08/ 0 赞/ 395 阅读

相关 js js加载顺序

在引入js声明中添加defer会先执行内部js文件，再执行外部js文件 defer <script src="~" type="text/javasc

╰+哭是因爲堅強的太久メ/ 2021年07月24日 17:21/ 0 赞/ 497 阅读

相关 js 页面加载顺序

![在这里插入图片描述][20191204204200680.png] ![在这里插入图片描述][20191204204211280.png] [20191204204

冷不防/ 2021年07月24日 15:58/ 0 赞/ 498 阅读

相关 html,css,js加载顺序

1.`js`放在`head`中会立即执行，阻塞后续的资源下载与执行。因为`js`有可能会修改`dom`，如果不阻塞后续的资源下载，`dom`的操作顺序不可控。正常的网页加载

一时失言乱红尘/ 2021年06月26日 16:06/ 0 赞/ 503 阅读