Javascript 在将内联JS放入外部JS并获得相同结果时遇到问题

我正在尝试为我的项目创建一个gif预加载程序。在本课程之前的课程中，我们被允许将JS内联放置，如下所示：

<script>
    let loader = document.getElementById("loader");

    window.addEventListener("load", function () {
        loader.style.height = "400px";
        loader.style.width = "400px";
        loader.style.borderRadius = "50%";
        loader.style.visibility = "hidden";
    });

</script>

---

我的问题是，现在，gif在外部文件中时将永远留在屏幕上。当它是内联的，它会加载一点，然后显示网站的内容。有人能帮我解决这个问题吗？

如果你的JS在

部分，

文档.getElementById（“loader”）

将是

空的，因为你没有等待DOM准备好，所以它还不存在。如果使用F12打开浏览器的开发者控制台，您将看到：

未捕获的TypeError:无法读取null的属性“style”

将脚本放在结束标记的前面，或者用以下内容包装代码：

addEventListener('DOMContentLoaded', function() { /* code */ });

如果JS位于
部分，
document.getElementById（“loader”）
将为
null
，因为您没有等待DOM准备就绪，所以它还不存在。如果使用F12打开浏览器的开发者控制台，您将看到：

未捕获的TypeError:无法读取null的属性“style”

将脚本放在结束标记的前面，或者用以下内容包装代码：

addEventListener('DOMContentLoaded', function() { /* code */ });

当文档准备就绪时，需要运行脚本。如果您的JS位于
，
文档中，则需要一个事件处理程序来加快脚本的执行。getElementById（“loader”）
将为
null
，因为您不需要等待DOM准备就绪，所以它还不存在（使用
F12
打开浏览器的开发人员控制台，查看它生成的错误）。将脚本放在关闭
标记之前，或者使用
addEventListener（'DOMContentLoaded'，function（）{/*code*/}包装代码）；
hey@blex，谢谢！你回答了我的问题。你能把你的评论作为答案，这样我就可以把它标记为正确的答案吗？你的脚本需要在文档准备好后运行。如果你的JS在
，
document.getElementById（“加载器”）中，你需要一个事件处理程序来加快脚本的执行
将为
null
，因为您没有等待DOM准备就绪，所以它还不存在（使用
F12
打开浏览器的开发人员控制台以查看它生成的错误）。或者将脚本放在关闭的
标记之前，或者使用
addEventListener（'DOMContentLoaded'，function（）包装代码{/*code*/}）；
hey@blex，谢谢！你回答了我的问题。你能把你的评论作为答案，这样我就可以把它标记为正确的吗？
(function () {

    "use strict";

    let loader = document.getElementById("loader");

    window.addEventListener("load", function () {
        loader.style.height = "400px";
        loader.style.width = "400px";
        loader.style.borderRadius = "50%";
        loader.style.visibility = "hidden";
    });
})();

addEventListener('DOMContentLoaded', function() { /* code */ });