多页网站避免重复加载动画触发的方法

根本原因在于：HTML 页面每次加载都是独立上下文，JavaScript 全局状态无法跨页保留。解决思路是将“是否已完成加载”这一状态持久化到客户端。推荐使用 localStorage —— 它简单、兼容性好（IE8+）、无需后端支持，且数据在同源下长期有效。

✅ 正确实现方案（带状态记忆）

将原始 counter() 函数升级为带检查机制的智能加载器：

function initLoadingScreen() {
    // 检查是否已加载完成
    if (localStorage.getItem('loadingCompleted') === 'true') {
        // 直接添加动画类，跳过计数
        applyAnimations();
        document.getElementById('load').style.display = 'none';
        return;
    }

    // 否则执行计数动画
    const counts = setInterval(() => {
        const loadNo = document.getElementById('load-no');
        let number = parseInt(loadNo.textContent) || 0;

        loadNo.textContent = (++number).toString();

        if (number === 100) {
            clearInterval(counts);
            localStorage.setItem('loadingCompleted', 'true'); // ✅ 标记已完成
            applyAnimations(); // 执行所有 DOM 动画与类添加
            setTimeout(() => {
                document.getElementById('load').style.display = 'none';
            }, 300); // 留出动画时间再隐藏
        }
    }, 30); // 每30ms递增1%，全程约3秒
}

// 抽离动画逻辑，便于复用
function applyAnimations() {
    const load = document.getElementById('load');
    const evLogo = document.getElementById('ev-logo');
    const navLinks = document.querySelectorAll('.nav-a');
    const fbIcon = document.querySelector('.fb-icon');
    const githubIcon = document.querySelector('.github-icon');
    const lineH = document.querySelector('.line-h');
    const lineV = document.querySelector('.line-v');
    const copyrightIcon = document.querySelector('.copyright-icon');
    const yearEl = document.querySelector('.year');
    const nameEl = document.querySelector('.name');
    const earlEl = document.querySelector('.earl-villarias');
    const sloganText = document.querySelector('.slogan-text');
    const sloganLines = document.querySelectorAll('.slogan-line');

    // 示例：添加过渡类（请按实际 CSS 类名调整）
    if (evLogo) evLogo.classList.add('loaded');
    if (fbIcon) fbIcon.classList.add('fb-icon-s');
    if (githubIcon) githubIcon.classList.add('github-icon-s');
    if (lineH) lineH.classList.add('line-expand-h');
    if (lineV) lineV.classList.add('line-expand-v');
    if (copyrightIcon) copyrightIcon.classList.add('icon-year-s');
    if (yearEl) yearEl.classList.add('icon-year-s');
    if (nameEl) nameEl.classList.add('name-s');
    if (earlEl) earlEl.classList.add('name-show');
    if (sloganText) sloganText.classList.add('slogan-show');

    navLinks.forEach(el => el.classList.add('s-d'));
    sloganLines.forEach(el => el.classList.add('slogan-line-expand'));
}

// 页面加载完成后启动
document.addEventListener('DOMContentLoaded', initLoadingScreen);

⚠️ 注意事项与最佳实践

• 清除测试缓存：开发时若修改了 localStorage 逻辑，可手动在浏览器控制台执行 localStorage.removeItem('loadingCompleted') 或 localStorage.clear() 重置状态。
• 首屏性能优先：加载屏本身应极简（内联 CSS + 最小 JS），避免因脚本阻塞而延迟首屏渲染。
• 无障碍友好：为 .load 容器添加 aria-hidden="true"，并在动画结束时移除，或设置 role="status" 提示屏幕阅读器。
• 降级处理：若用户禁用 localStorage，可在 try...catch 中回退到默认行为（每次加载），确保功能不中断。
• 单页应用（SPA）更优解：若项目未来转向 Vue/React，应改用路由守卫（如 Vue Router 的 beforeEach）统一控制加载状态，而非依赖多页 HTML。

通过这一改进，用户首次访问 index.html 时完成加载动画并写入标记；切换至 about.html 时立即读取 localStorage 并跳过计数，直接激活动画类——真正实现跨页状态一致性，兼顾用户体验与代码健壮性。

终于介绍完啦！小伙伴们，这篇关于《多页网站避免重复加载动画触发的方法》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！