显示微调器，直到页面加载外部资源

Question

我想显示一个微调器，直到页面完全加载（包括外部资源）。该页面正在显示横幅（广告），并且正在从广告服务器加载这些横幅和广告。

我使用以下逻辑来显示微调器并在转换结束后隐藏它，但是，我认为它不会检查是否所有页面资源都已加载：

HTML

<div class="loader"></div>

CSS

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333333;
  transition: opacity 0.75s, visibility 0.75s;
}

.loader--hidden {
  opacity: 0;
  visibility: hidden;
}

.loader::after {
  content: "";
  width: 75px;
  height: 75px;
  border: 15px solid #dddddd;
  border-top-color: #009578;
  border-radius: 50%;
  animation: loading 0.75s ease infinite;
}

@keyframes loading {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

JS

window.addEventListener("load", () => {
  const loader = document.querySelector(".loader");

  loader.classList.add("loader--hidden");

  loader.addEventListener("transitionend", () => {
    document.body.removeChild(loader);
  });
});

我尝试实现此代码。

Answer 1

一种方法是检查

div

是否为空（空表示正在加载，不空表示停止加载）。

您可以使用 JavaScript 来实现此目的

childNodes

（了解更多信息这里）。但是，您必须考虑当请求失败并且第三方元素未加载到

div

时会发生什么。