javascript - Preloader 一直在加载，内容加载完成后不消失

Question

好的，首先，这是我的代码。

var loader = document.getElementById("loader");
window.addEventListener("loader", function () {
  loader.style.display = "none";
})

body {
  height: 100%;
  widows: 100%;
  overflow: hidden;
}

.loader {
  position: absolute;
  height: 80px;
  width: 80px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 6px solid lightgrey;
  border-radius: 100%;
  border-top: 6px solid skyblue;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="loader" id="loader"></div>
<h1>Hello World</h1>

现在的问题是内容已加载但微调器并未消失。任何解决方案。顺便提一句。这是我在这里的第一篇文章，所以如果您发现代码格式不正确或其他错误，请原谅我。

Answer 1

loader 不是事件。

window.addEventListener ("loader", function() )

将其更改为:

window.addEventListener ("load", function() {
    loader.style.display = 'none';
});

window.addEventListener ("load", fn()) 等待所有内容加载完毕，包括样式表和图像。

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload