将内联JS放入外部JS并获得相同结果时遇到麻烦

Question

我正在尝试为我拥有的项目创建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>

这与以下HTML和CSS一起运行：

HTML

<div id="loader">
    <img src="images/pepper.gif" alt="loading animation"/>
</div>

CSS

#loader {
    height: 2000px;
    width: 2000px;
    background-color: black;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    transition: all .5s;
}

#loader img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

这很好。但是，在本课程中，要求我们将JS放在一个外部文件中。

我已经像这样链接了文件

<script src="js/index.js"></script>

在HTML的head标签中。

JS看起来像这样（我们需要使用IIFE）：

(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";
    });
})();

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

Answer 1

F12