js 判断文档加载 完成
在JavaScript中，判断文档加载完成通常使用DOMContentLoaded事件或window.onload事件。
一、基础概念
- DOMContentLoaded事件
- 当HTML文档被完全加载和解析完成后触发，不需要等待样式表、图像和子框架的加载。
- window.onload事件
- 当整个页面（包括所有依赖的资源如样式表、图像等）都加载完成后触发。
二、相关优势
- DOMContentLoaded
- 优势在于可以更快地执行脚本，因为它不需要等待所有资源加载完成。
- window.onload
- 优势在于确保所有资源都已加载，适用于需要在所有资源加载完成后执行的操作。
三、应用场景
- DOMContentLoaded
- 适用于DOM操作，如初始化插件、绑定事件等。
- window.onload
- 适用于需要在页面完全加载后执行的操作，如图片尺寸调整、页面滚动效果等。
四、示例代码
- 使用DOMContentLoaded
document.addEventListener('DOMContentLoaded', function() {
console.log('文档加载完成');
// 在这里执行DOM相关的操作
});- 使用window.onload
window.onload = function() {
console.log('页面完全加载完成');
// 在这里执行需要等待所有资源加载完成的操作
};五、常见问题及解决方法
- 事件未触发
- 确保脚本在文档加载前执行，可以将脚本放在
<head>标签内，并使用defer属性，或者将脚本放在<body>标签的底部。 - 检查是否有语法错误或其他脚本错误阻止了事件的绑定和触发。
- 确保脚本在文档加载前执行，可以将脚本放在
- 事件触发顺序
DOMContentLoaded总是在window.onload之前触发，如果需要确保某些操作在所有资源加载完成后执行，应使用window.onload。
通过以上方法，可以有效地判断文档加载完成，并在适当的时候执行相应的操作。
相关·内容
14分23秒
93.尚硅谷_JS基础_文档的加载
380
10分45秒
04-jQuery/10-尚硅谷-jQuery-原生js和jQuery页面加载完成之后的区别
380
28分22秒
62.加载更多的回调完成.avi
3810
8分56秒
116.尚硅谷_JS基础_完成bind函数
370
26分19秒
136.尚硅谷_JS基础_完成轮播图
410
34分47秒
134.尚硅谷_JS基础_完成轮播图界面
360
17分7秒
135.尚硅谷_JS基础_完成点击按钮切换图片
480
9分5秒
10.MySQL锁之使用一个更新的SQL语句完成判断及更新
410
7分23秒
第二十章：类的加载过程详解/64-加载完成的操作及二进制的获取方式
330
17分14秒
Golang教程 智能合约 54 加载js文件与启动私链挖矿 学习猿地
3730
28分53秒
138.尚硅谷_JS基础_二级菜单-完成基本功能
380
13分23秒
02.尚硅谷_图片加载框架Glide_三个例子总的布局完成.avi
3820
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
