页面重载时隐藏DIV？加载遮罩仅首次显示的实现求助

你的代码问题出在window.location.reload()这个方法上——它会立即触发页面刷新，刷新之后当前页面的JS代码就终止执行了，所以后面那句document.getElementById('loading').style.display = 'none'根本没机会运行，自然达不到预期效果。

要实现「首次加载显示Loading，点击自定义刷新按钮时不显示，F5刷新不受影响」的需求，我们可以借助localStorage来标记刷新的来源，具体方案如下：

完整实现代码 #

<!-- 你的Loading Overlay结构 -->
<div id="loading" style="display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); color:white; display:flex; align-items:center; justify-content:center;">
  Loading...
</div>

<!-- 刷新按钮 -->
<button type="button" onclick="reloadWithNoLoading()">刷新页面</button>

<script>
// 页面加载时执行的逻辑
window.addEventListener('load', function() {
  const isButtonReload = localStorage.getItem('buttonReload');
  
  if (isButtonReload) {
    // 如果是按钮触发的刷新，隐藏Loading
    document.getElementById('loading').style.display = 'none';
    // 清除标记，避免下次F5刷新也受影响
    localStorage.removeItem('buttonReload');
  } else {
    // 首次加载或F5刷新，显示Loading
    document.getElementById('loading').style.display = 'flex';
    // 这里可以根据实际需求调整，比如异步数据加载完成后再隐藏Loading
    // 示例：如果有接口请求，可在请求回调里执行 document.getElementById('loading').style.display = 'none';
  }
});

// 按钮点击的刷新逻辑
function reloadWithNoLoading() {
  // 设置标记，告诉下一次页面加载是按钮触发的
  localStorage.setItem('buttonReload', 'true');
  // 刷新页面
  window.location.reload();
}
</script>

工作原理说明 #

• 点击自定义刷新按钮时，先在localStorage中存入一个标记buttonReload，然后再执行页面刷新。
• 页面加载完成后，先检查这个标记：
  • 如果存在标记，说明是按钮触发的刷新，直接隐藏Loading，然后清除标记（确保下次F5刷新时标记不存在）。
  • 如果没有标记，说明是首次加载或者F5刷新，正常显示Loading。
• localStorage在页面刷新后不会被清除，刚好能帮我们传递这个刷新来源的信息，完美契合你的需求。

另外补充一点：如果你的Loading是用来等待异步数据加载的，那可以把隐藏Loading的逻辑放在数据加载完成的回调里，而不是页面加载完成就隐藏，这样更符合实际业务场景。

内容的提问来源于stack exchange，提问作者Pixelmaker