无法将内联 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

如果你的 JS 在 <head> 部分，document.getElementById("loader") 将是 null 因为你不需要等待 DOM 准备好，所以它会还不存在。如果您使用 F12 打开浏览器的开发人员控制台，您将看到：

Uncaught TypeError: Cannot read property 'style' of null

要么将您的脚本放在结束 </body> 标记之前，要么将您的代码包装为：

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

无法将内联 JS 放入外部 JS 并获得相同的结果

Having trouble placing inline JS into external JS and getting the same result

html

javascript

css

preload