当 javascript 代码放在外部 `.js` 文件中时，因执行时机早于 html 解析完成，导致 `getelementbyid` 等方法无法找到元素；将其移入 `window.addeventlistener('load', ...)` 内部可确保 dom 完全加载后再执行。
在 Web 开发中，一个常见却容易被忽视的问题是：同样的 JavaScript 代码，在 <script> 标签内直接写在 HTML 中可以正常运行，但一旦抽离到独立的 .js 文件中就失效了。根本原因在于 脚本执行时机与 DOM 加载顺序的不匹配。
你的原始代码如下：
var loader = document.getElementById("ld");
window.addEventListener("load", function() {
loader.style.display = "none";
});问题出在第一行：document.getElementById("ld") 在脚本加载时立即执行，而此时 <div class="loader" id="ld"></div> 尚未被浏览器解析（因为你的 <script src="script.js"> 标签位于 <head> 中，早于 <body> 渲染）。结果 loader 变量为 null，后续即使 load 事件触发，对 null.style.display 的操作也会抛出 TypeError。
✅ 正确做法是：将 DOM 查询逻辑也放入事件监听器内部，确保执行时 DOM 已就绪：
立即学习“Java免费学习笔记（深入）”；
window.addEventListener("load", function() {
var loader = document.getElementById("ld");
if (loader) {
loader.style.display = "none";
}
});⚠️ 补充说明与最佳实践：
- window.load 事件会等待整个页面资源（包括图片、样式表、iframe 等）全部加载完毕才触发，适合需要确保所有资源就绪的场景（如隐藏加载器）；
- 若仅需等待 DOM 结构就绪（无需等待图片等），更轻量的选择是使用 DOMContentLoaded 事件：
document.addEventListener("DOMContentLoaded", function() { const loader = document.getElementById("ld"); if (loader) loader.style.display = "none"; }); - 同时，请检查 HTML 中 <script> 标签位置：当前你将其放在 <head> 内，虽可通过事件监听修复，但更推荐将脚本标签移至 </body> 前（即 <body> 底部），并配合 defer 属性以兼顾性能与可靠性：
<!-- 推荐：放在 body 结束前 --> <script src="script.js" defer></script>
总结：外部 JS 文件的执行不受 HTML 书写顺序“保护”，必须显式等待 DOM 就绪。始终将依赖 DOM 节点的操作封装在 DOMContentLoaded 或 load 事件处理器中，并添加存在性校验（if (loader)），即可稳健解决此类问题。
