每次站点访问仅显示Vanille Preloader一次

Question

我有一个香草预加载器的代码:

<div class="vanilla-preloader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {

let loader = document.querySelector('.vanilla-preloader');

loader.style.opacity = 0;
loader.addEventListener('transitionend', () => loader.remove 
});
</script>
<style>
.vanilla-preloader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
transition: 1s 3s;
pointer-events:none;
background: url('https://misfitmovement.eu/wp-content/uploads/2022/12/Black-Video.gif') 50% 50% no-repeat #000; /* Change the #fff here to your background color of choice for the preloader fullscreen section */
background-size: 500px;
}
.elementor-editor-active .vanilla-preloader {
display: none;
}
</style>

预加载器工作正常，但每次我进入放置HTML代码的页面时，它都会再次显示。是否有办法避免这种情况，并且每次会话或站点访问只显示一次。

我已经从其他问题中尝试了一些代码，但这些代码对我的问题不起作用。

Answer 1

你可以尝试使用cookie，比如一旦页面被加载设置一些cookie，如loaded: true或其他你想要的东西，并根据cookie的值，你可以设置预加载器的不透明度或显示

查看cookie的实现:https://www.w3schools.com/js/js_cookies.asp

，查看更多预加载器设计的视频:https://youtu.be/chkcd11okxc