预加载器会继续加载，并且在加载内容时不会消失 [英] Preloader keeps on loading and doesnt disappear when the content is loaded

问题描述

好吧，首先，这是我的代码.

Ok so, first of all, Here's my code.

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>

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

Now the problem is that the content gets loaded but the spinner doesn't disappear. Any Solutions. BTW. This is my first post here so if you find that the code is not formatted correctly or some other mistake then forgive me.

推荐答案

loader 不是事件.

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

将其更改为:

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

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

window.addEventListener ("load", fn()) waits until everything is loaded, including stylesheets and images.

在文档加载过程结束时触发加载事件.至此，文档中的所有对象都在DOM中，并且所有图像，脚本，链接和子框架均已完成加载.

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

这篇关于预加载器会继续加载，并且在加载内容时不会消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！