Question

我正在尝试建立一个网站，并且在以下方面遇到了严重的麻烦。因此，假设用户重新加载或单击了站点上另一个页面的链接，那么我想在显示要访问的页面之前显示加载页面。这是我的代码，我确实遇到了一些麻烦。任何建议将不胜感激，但我真的很想这样做，而不必增加或删除过多。我试着玩了javascript，但是a，它没有用。如果您对此有任何建议，请也告诉我。非常感谢！

index.html

<!DOCTYPE html>
<meta charset = 'UTF-8'>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "styles.css">
<link rel = "stylesheet" href = "animate.css">
<head>
  <script src = "scripts.js"></script>
  <a href="#">
    <img class = "animated zoomIn" src = "image.png">
  </a>
  <div id = "navbar" class = "overlay">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class = "overlay-content">
          <a href="#"> Home </a>
          <a href="#"> About Us </a>
          <a href="#"> Gallery </a>
          <a href="#"> The Podcast </a>
          <a href="#"> More </a>
          <a href="#"> Merch </a>
          <a href="#"> Appearances </a>
          <a href="#"> Contact Us </a>
          <a href="#"> We're Hiring! </a>
          <div class = "line"></div>
  </div>
</div>
<div class = "animated slideInLeft" style = "text-align: center;">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">
  &#9776; Open Me!
</span>
</div>
</head>

<body>
<h1 style ="text-align:center">



</body>

styles.css

*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    @font-face {
        font-family: Paintball;
        font-weight: bold;
        src: url(paintball_web.woff);
    }
    /* Header Properties */
    body{
      background-color: navy;
      font-family: Paintball;
    }
    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 40%;
    }

    /*Navigation Bar Properties */

    .overlay {
      height: 100%;
      width: 0;
      position: absolute;
      z-index: 1;
      top: 0;
      text-align: center;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0, 0.9);
      overflow-x: hidden;
      transition: 0.5s;
    }

    .overlay-content {
      position: relative;
      top: 25%;
      width: 100%;
      text-align: center;
      margin-top: 30px;
    }

    .overlay a {
      padding: 8px;
      text-decoration: none;
      font-size: 36px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }

    .overlay a:hover, .overlay a:focus {
      color: #f1f1f1;
    }

    .overlay .closebtn {
      position: absolute;
      top: 20px;
      right: 45px;
      font-size: 60px;
    }

    div span{
      color:#42f459;
    }

    /* Loader Properties */

    .wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }

    .text {
      color: #42f459;
      display: inline-block;
      margin-left: 5px;
    }

    .bounceball {
      position: relative;
      display: inline-block;
      height: 37px;
      width: 15px;
    }
    .bounceball:before {
      position: absolute;
      content: '';
      display: block;
      top: 0;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-color: #42f459;
      -webkit-transform-origin: 50%;
              transform-origin: 50%;
      -webkit-animation: bounce 500ms alternate infinite ease;
              animation: bounce 500ms alternate infinite ease;
    }

    @-webkit-keyframes bounce {
      0% {
        top: 30px;
        height: 5px;
        border-radius: 60px 60px 20px 20px;
        -webkit-transform: scaleX(2);
                transform: scaleX(2);
      }
      35% {
        height: 15px;
        border-radius: 50%;
        -webkit-transform: scaleX(1);
                transform: scaleX(1);
      }
      100% {
        top: 0;
      }
    }

    @keyframes bounce {
      0% {
        top: 30px;
        height: 5px;
        border-radius: 60px 60px 20px 20px;
        -webkit-transform: scaleX(2);
                transform: scaleX(2);
      }
      35% {
        height: 15px;
        border-radius: 50%;
        -webkit-transform: scaleX(1);
                transform: scaleX(1);
      }
      100% {
        top: 0;
      }
    }

Welcome.html

<!DOCTYPE html>
<meta charset = 'UTF-8'>
<meta http-equiv="Refresh" content="4; url=index.html" />
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "styles.css">
<div class="wrap">
  <div class="loading">
    <div class="bounceball"></div>
    <div class="text">NOW LOADING</div>
  </div>
</div>

scripts.js

    function openNav() {
  document.getElementById("navbar").style.width = "100%";
}

function closeNav() {
  document.getElementById("navbar").style.width = "0%";
}

document.addEventListener('DOMContentLoaded',function(){
  if(document.readyState === 'complete'){
    alert("loaded");
  }
}
)

document.addEventListener('readystatechange',function(){
    if (document.readystate === 'loading'){
      window.location = "Welcome.html";
    }
}
)

重新加载时，显示正在加载的html页面并重定向到正确的页面

0 个答案: