如何实现页面加载器与动画单会话仅首次访问时展示？

问题根因 #

原有代码存在三个核心逻辑问题：

• 写死的init()函数全场景执行2秒强制延时，未与首次访问标记联动，所有访问场景都会触发2秒加载等待
• sessionStorage判断逻辑仅处理了加载器显隐，未同步处理主内容区展示逻辑，也未跳过延时加载流程
• 主内容区.main未设置默认初始样式，淡入过渡的状态切换缺少统一规则

修复后完整代码 #

CSS部分 #

补充主内容区默认样式、隐藏类样式，调整过渡逻辑：

.loader {
    position: fixed;
    z-index: 999;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    text-align: center;
    transform-origin: bottom center;
    animation: rotate 3s linear infinite;
    transition: opacity 0.3s ease;
}

.loader.hidden {
    opacity: 0;
    display: none;
}

.circle {
    display: inline-block;
    background-color: #16e0bd;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    transform: scale(0);
    animation: grow 1.5s linear infinite;
    margin: -10px;
}

.circle:nth-child(2) {
    background-color: #303030;
    animation-delay: 0.75s;
}

.main {
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease;
}

.main.show-immediate {
    opacity: 1;
    display: block;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes grow {
    50% {
        transform: scale(1);
    }
}

JS部分 #

重构逻辑，首次访问才执行加载动画流程，非首次访问直接展示内容：

const navToggle = document.querySelector('.nav-toggle');
const navLinks = document.querySelectorAll('.nav__link')
const loader = document.querySelector('.loader');
const main = document.querySelector('.main'); 

function initFirstVisit() {
    setTimeout(() => {
        loader.style.opacity = 0;
        setTimeout(() => {
            loader.style.display = 'none';
        }, 300);
    
        main.style.display = 'block';
        setTimeout(() => (main.style.opacity = 1), 50);
        sessionStorage.setItem('viewed', '1');
    },2000);
}

function initReturnVisit() {
    loader.classList.add('hidden');
    main.classList.add('show-immediate');
}

window.addEventListener("load", function () {
    if (!sessionStorage.getItem('viewed')){
        initFirstVisit();
    }else{
        initReturnVisit();
    }
})

navToggle.addEventListener('click', () => {
    document.body.classList.toggle('nav-open');
});

navLinks.forEach(link => {
    link.addEventListener('click', () => {
        document.body.classList.remove('nav-open');
    })
})

HTML部分 #

原有结构无需调整，保持即可：

<div class="loader">
    <div class="circle"></div>
    <div class="circle"></div>
</div>

<div class="main">
    <!-- 主内容区原有代码保持不变 -->
</div>

实现说明 #

• 用sessionStorage存储访问标记，标签页关闭前标记持续生效，覆盖页面刷新、站内跳转返回的场景
• 首次访问才执行2秒加载动画流程，动画播放完成后写入访问标记
• 回访场景直接跳过所有延时逻辑，给加载器加隐藏类、给主内容区加即时显示类，实现无延迟加载
• 补充透明度过渡样式，避免显隐切换生硬

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