Question

单击按钮（取消隐藏图像）后，我显示一个加载屏幕，然后加载另一个页面。这很好。

但是，如果用户单击“上一页”并返回。我的加载屏幕出现，因此没有被隐藏。如果我手动刷新此页面，则很好。

这是我的代码。在html中：

<input id="saveForm" class="btn btn-info" type="submit" name="submit" value="Submit" onclick="load()"/>
<script>
     function load() {
          document.getElementById('loader').style.display='block';              
     }
</script>

<img class="load_spinner" id="loader" style="display:none;"/>

在CSS中：

.load_spinner {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0.5;
    background: url(/static/img/Preloader_2.gif) center no-repeat #fff;
}

如果用户返回，我应该怎么做才能隐藏加载屏幕？

Answer 1

这是您需要的方式。在调用下一页之前，使用回调函数删除加载程序。然后，当用户返回上一页时，加载程序将不会出现。

.lds-ring {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 51px;
  height: 51px;
  margin: 6px;
  border: 6px solid #cef;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #cef transparent transparent transparent;
}
.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<form onsubmit="validating();"  id="myForm" action="https://www.w3schools.com/action_page.php?firstname=Mickey&lastname=Mouse">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit" onclick="load()">
</form> 

<div id="loader" class="lds-ring" style="display: none;"  ><div></div><div></div><div></div><div></div></div>

{{1}}

Answer 2

使用与我的答案{{3}}相同的技术并使用localStorage：

window.onload = function() {
  if (!localStorage.getItem("firstVisit")) {
    localStorage.setItem("firstVisit", "true");
  } else {
    document.getElementById("loader").style.display = "none";
};

或实际上将其删除：

document.getElementById("loader").parentNode.removeChild(document.getElementById("loader"));

Answer 3

按照杰克·巴什福德的回答，我想出了一种方法。通过放置，

window.addEventListener( "pageshow", function ( event ) {
     document.getElementById("loader").style.display = "none";
});

我有效地隐藏了图像。

返回上一页后图像未隐藏

3 个答案: