如何让Vanilla Preloader仅在单次站点访问中显示一次？

可以通过**会话存储（sessionStorage）或本地存储（localStorage）**标记预加载器是否已显示，从而控制其仅在单次会话或站点访问中出现一次。以下是修改后的完整代码：

修改后的完整代码 #

<div class="vanilla-preloader"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const loader = document.querySelector('.vanilla-preloader');
  // 检查会话存储中是否已有预加载器显示记录
  const hasShownLoader = sessionStorage.getItem('loaderShown');

  if (!hasShownLoader) {
    // 显示预加载器
    loader.style.display = 'block';
    // 标记会话内已显示过预加载器
    sessionStorage.setItem('loaderShown', 'true');

    // 执行原有隐藏逻辑
    loader.style.opacity = 0;
    loader.addEventListener('transitionend', () => loader.remove());
  } else {
    // 已显示过，直接移除预加载器元素
    loader.remove();
  }
});
</script>

<style>
.vanilla-preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  transition: opacity 1s 3s; /* 明确过渡属性，避免歧义 */
  pointer-events: none;
  background: url('https://misfitmovement.eu/wp-content/uploads/2022/12/Black-Video.gif') 50% 50% no-repeat #000;
  background-size: 500px;
  display: none; /* 默认隐藏预加载器 */
}
.elementor-editor-active .vanilla-preloader {
  display: none;
}
</style>

关键说明 #

• 会话存储（sessionStorage）：标记仅在当前浏览器会话有效，用户关闭浏览器窗口后再次打开网站会重新显示预加载器。
• 本地存储（localStorage）：如果需要预加载器在用户后续访问站点时都不再显示，只需将代码中的sessionStorage替换为localStorage即可。
• 预加载器默认通过CSS的display: none隐藏，只有在未标记过的情况下才会显示并执行原有隐藏逻辑。

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