怎么把html加载完了在运行js_html加载完运行js方法【教程】-html教程-PHP中文网

怎么把html加载完了在运行js_html加载完运行js方法【教程】

爱谁谁

发布： 2025-12-01 19:57:06

原创

577人浏览过

答案：确保JS在HTML加载后执行的方法有四种。1. 使用 DOMContentLoaded 事件，适合操作DOM；2. 将 script 标签置于 body 底部，简单直接；3. 使用 window.onload，等待所有资源加载完成；4. 外链JS使用 defer 或 async 属性，推荐 defer 以保证执行顺序。根据需求选择合适方式即可。

怎么把html加载完了在运行js_html加载完运行js方法【教程】

要在HTML加载完成后运行JavaScript，关键在于确保JS代码不会在页面元素还未生成时就执行。以下是几种常用且有效的方法。

1. 使用 DOMContentLoaded 事件

当HTML文档完全加载和解析完毕后，会触发 DOMContentLoaded 事件，此时无需等待样式表、图片等资源加载完成。

适合大多数需要操作DOM的场景。

document.addEventListener('DOMContentLoaded', function () {
  // 在这里写你的JS代码
  console.log('HTML已加载完成');
  // 比如操作某个元素
  const element = document.getElementById('myDiv');
  if (element) {
    element.style.color = 'red';
  }
});

登录后复制

2. 将 script 标签放在 body 底部

把 <script> 标签放在 </body> 之前，这样浏览器会先加载完所有HTML再执行JS。

这是最简单直接的方式，适用于简单的页面。

<!DOCTYPE html>
<html>
<head>
  <title>页面标题</title>
</head>
<body>
  <div id="myDiv">我是内容</div>
<p><!-- JS 放在 body 结束前 -->
<script>
const element = document.getElementById('myDiv');
element.style.fontSize = '20px';
</script>
</body>
</html>

登录后复制

3. 使用 window.onload

如果JS依赖图片或其他外部资源（比如轮播图、Canvas绘图），可以使用 window.onload，它会在所有资源加载完成后执行。

注意：它比 DOMContentLoaded 更晚触发。

TextCortex

AI写作能手，在几秒钟内创建内容。

查看详情

立即学习“前端免费学习笔记（深入）”；

window.onload = function () {
  console.log('页面所有资源都已加载完成');
  // 可安全操作图片尺寸等
  const img = document.getElementById('myImage');
  console.log(img.naturalWidth);
};

登录后复制

4. 使用 async 和 defer 属性（推荐用于外链JS）

对于通过 <script src="...js"></script> 引入的外部脚本：

defer：脚本延迟执行，在HTML解析完成后按顺序运行，保证执行时机在DOM构建之后。
async：脚本异步加载，加载完成后立即执行，不保证顺序，通常用于独立脚本（如统计代码）。

<!-- 推荐用于模块化JS -->
<script src="app.js" defer></script>

登录后复制

基本上就这些。根据你的项目需求选择合适的方式：简单页面用底部 script，复杂逻辑用 DOMContentLoaded，带资源依赖用 load，外联JS加 defer。不复杂但容易忽略细节。

以上就是怎么把html加载完了在运行js_html加载完运行js方法【教程】的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

用html怎么运行3d相册_html运行3d相册方法【教程】怎么运行html5文件_运行html5文件方法【教程】 html的网页怎么运行脚本语言_网页运行html脚本语言方法【教程】手机上怎么运行html和js_手机运行html和js配合法【教程】怎么用html运行圣诞树代码_用html运圣诞树代码技巧【技巧】