Question

如何停止加载屏幕，然后进入主页或网站？

也可以在此处更新代码：

//开始代码段：js隐藏：false控制台：true babel：false

//语言：lang-css

.navbar__link {
  position: static;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 15px;
  margin: 20px 0;
  border-radius: 10px;
  background: #ffffff;
  color: #000000;
  border-bottom: 1px solid #ffffff;
  display: flex;
  text-align: center;
  display: inline-block;
  padding: 20px;
}


}
// you don't need to add class to a tag, it can be selected by following way
.navbar>a {
  text-decoration: none;
  padding: 15px;
}
.header {
  display: flex;
  // make the header take all space of body
  width: 100%;
}
.navbar {
  display: flex;
  // make navbar take all space that remains after the logo
  flex: 1;
  justify-content: center;
  // make the navbar move left side else it will not be in complete middlle
  transform: translate(-100px);
}
* {
  margin: 0;
  padding: 0;
}
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.logo {
  width: 48px;
  height: 48px;
}
.loading-bar {
  width: 130px;
  height: 2px;
  background: #ffffff;
  margin-top: 22px;
  position: relative;
  overflow: hidden;
}
.loading-bar::before {
  content: '';
  width: 68px;
  height: 2px;
  background: #000000;
  position: absolute;
  left: -34px;
  animation: blackbar 1.5s infinite ease;
}
@keyframes blackbar {
  50% {
    left: 96px;
  }
}

<header>
  <div style="float: left; padding-right: 10px;">
    <a href="/"><img width='200' height='50' src='Icons/logo home.png' /></a>
  </div>
  <div class="navbar" style="justify-content: center;">
    <a href="discovery.html" class="navbar__link">
      <span class="material-icons">whatshot</span>
    </a>
    <a href="profile.html" class="navbar__link">
      <span class="material-icons">person_outline</span>
    </a>
  </div>

  <!-- Loading Screen -->

  <div class="loading-screen">
    <div class="loading-animation">
      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
      <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve">  <image id="image0" width="90" height="90" x="0" y="0"
              xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaAQAAAAAQ03yvAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
          AAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAAmJLR0QAAd2KE6QAAAAJcEhZ
          cwAACxMAAAsTAQCanBgAAAAHdElNRQfkBwsBJxoCRYkNAAAAmElEQVQ4y2P4jwAHGEY5w5zzhx2J
          8xPO3n+A4TMq5/CP2vYPFfZMzCCO5XOb4vPf54Bkfv6veT/n9/3/d0CcP3Y15+f+ng/h/OdjOCAL
          5NyzB3GO1Z//+3v+D3l+EOcZmPP4/mME5/n9zyDOc/vnf3/ffz4fxPl+3u753d/nn8/9PP8Awwf5
          Az9kf38oiOE/PBjCbZRDNw4Awv38T7O+5eEAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDctMTFU
          MDE6Mzk6MjYrMDM6MDDkTb6MAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA3LTExVDAxOjM5OjI2
          KzAzOjAwlRAGMAAAAABJRU5ErkJggg==" />
          </svg>
      <div class="loading-bar"></div>
    </div>
  </div>

</header>

JS：

function handlePageLoaded(){
  document.getElementsByClassName("loading-screen")[0].style.display = "none";
}

更新将在此下方

更新1：它们都不起作用：（。

可悲的是，所有3个答案均不起作用，由于某些奇怪的原因，它不会重定向到页面。但是我们将继续尝试：D！

更新2：仍然无法正常工作。我尝试了JS，并尝试将类更改为id，但是它坏了，所以我将其放回了类：（。

如果您愿意，也可以更改代码。

更新4：我尝试了所有无法令人满意的工作，但是我认为这与代码有关，因为它不会加载到仅停留在加载中的网站中。

更新5：如果要查看代码，请更新代码笔。仍然不起作用：（。

[已修复]

Answer 1

要检查网页是否已完全加载，请使用document.readyState === "complete"或window.onload。

document.readyState具有三个可能的值loading，interactive，complete。

loading：正在加载文档。

interactive：文档已完成加载，但图像，样式表和框架仍在加载。

complete：文档已完全加载，包括。

js：

// check if page is loaded 
if(document.readyState === "complete") {
  // make loading screen go away
  document.getElementById('loading').style.display = none
}

这不会重定向，但您应尝试避免重定向，因为它将使页面速度更快，并给网站带来更好的整体感觉和体验（再加上重定向会破坏具有加载屏幕的目的）。

不要忘记在id div中添加loading-screen属性，以便您可以将js中的元素作为目标。

Answer 2

您可以处理 window.onload 加载的页面。我们可以在此处分配一个函数，该函数可以在页面加载时隐藏您的加载器。

window.onload = () => {
    const loader = document.querySelector('.loading-screen');
    loader.style.display = 'none';
}

或者如果您需要重定向到另一个页面，则可以通过这种方式完成

window.onload = () => {
    window.location.replace("somethingAmazing.html")
}

如果您希望它有一个延迟（比如说页面加载很快，但是您希望动画花费3秒钟，并且您希望它在播放到内容之前完整播放），请尝试以下操作：

window.onload = setTimeout(() => {
    window.location.replace("somethingAmazing.html")
}, 3000)

您可以将 3000 更改为您希望其等待的毫秒数

Answer 3

您可以执行以下操作：

1。在您的<body />标记中：

<body onload="handlePageLoaded()">
 ...
</body>

2。在您的javascript文件中：

function handlePageLoaded(){
  document.getElementsByClassName("loading-screen")[0].style.display = "none";
}

正文页面完全加载后，将调用功能handlePagaLoaded。

在这种情况下，建议您在加载屏幕上使用id而不是课堂。

在这种情况下，函数将是：

function handlePageLoaded(){
      document.getElementById("loading-screen").style.display = "none";
    }

您也可以使用document.getElementById("loading-screen").style.visibility= "hidden";，因为您的“加载屏幕” position是固定的。

希望有帮助！

如何停止加载屏幕并进入主页？

3 个答案: