如何仅在用户首次进入首页时播放启动屏动画，返回时不重复播放

要实现仅首次加载首页时展示启动屏，同一会话内返回首页不再重复播放，直接用sessionStorage记录状态就行——它会在页面关闭后自动清除数据，完美匹配你的需求。

修改后的JS代码： #

const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e) => {
    // 检查当前会话是否已显示过启动屏
    const hasShownSplash = sessionStorage.getItem('splashShown');
    if (!hasShownSplash) {
        // 首次加载，执行原有隐藏逻辑并标记状态
        setTimeout(() => {
            splash.classList.add('display-none');
        }, 2000);
        // 存入标记，当前会话内不再重复触发
        sessionStorage.setItem('splashShown', 'true');
    } else {
        // 非首次加载，直接隐藏启动屏
        splash.classList.add('display-none');
    }
})

代码说明： #

• sessionStorage.getItem('splashShown')：读取是否存在已显示启动屏的标记
• 无标记时，正常执行2秒后隐藏启动屏的逻辑，同时存入标记记录状态
• 有标记时，直接给启动屏添加display-none类，让它一开始就不显示

HTML和CSS部分无需修改，保持原有代码即可。

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