我正在尝试为我拥有的项目创建一个 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 回答
郎朗坤
TA贡献1921条经验 获得超9个赞
如果你的JS在<head>part，那document.getElementById("loader")是null因为你没有等待DOM准备好，所以它还不存在。如果您使用 打开浏览器的开发者控制台F12，您将看到：
未捕获的类型错误：无法读取 null 的属性“样式”
要么把你的脚本放在结束</body>标签之前，要么用以下代码包装你的代码：
addEventListener('DOMContentLoaded', function() { /* code */ });添加回答
举报
0/150
提交
取消