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

Question

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

同时在此处更新代码：

// begin snippet: js hide: false console: 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：None 他们工作 :(.

遗憾的是，所有 3 个答案均无效，由于某些奇怪的原因，它不会重定向到该页面。但我们会继续努力:D!

更新 2：仍然无效。我尝试了 JS 并尝试将 class 更改为 id 但它坏了所以我把它放回 class :(.

你们也可以更改代码。

更新 4：我尝试了所有方法，但遗憾的是它们无法正常工作，但我认为这与代码有关，因为它不会加载到站点中，它只是卡在加载中。

更新5：想看代码的请更新codepen。还是不行:(.

[已修复]

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
}

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

别忘了给 loading-screen 添加一个 id 属性 div 这样你就可以在 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.In 你的 <body /> 标记：

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

2.In 你的 javascript 文件：

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

函数 handlePagaLoaded 将在正文页面完全加载后调用。

在这种情况下，我建议您使用 id 而不是 class 作为加载屏幕。

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

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

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

希望对您有所帮助！

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

How do I make my loading screen stop and go into my main page?

html

javascript

css

nav

navbar