无法将内联 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>
这使用以下 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 将永远留在屏幕上。当它内联时，它会加载一段时间，然后显示站点的内容。谁能帮我解决这个问题？
阿波罗的战车1回答
-
郎朗坤
如果你的JS在<head>part，那document.getElementById("loader")是null因为你没有等待DOM准备好，所以它还不存在。如果您使用 打开浏览器的开发者控制台F12，您将看到：未捕获的类型错误：无法读取 null 的属性“样式”要么把你的脚本放在结束</body>标签之前，要么用以下代码包装你的代码：addEventListener('DOMContentLoaded', function() { /* code */ });
随时随地看视频慕课网APP
相关分类
JavaScript