本文介绍如何通过浏览器本地存储（localstorage）持久化记录加载状态，确保用户在不同 html 页面间跳转时，加载动画仅执行一次，后续访问直接跳过并保留已添加的 css 类。
在构建多页面静态网站（如 index.html 和 about.html）时，若每个页面都嵌入相同的加载屏（
）和计数逻辑，用户每次跳转都会重新触发 0% → 100% 的加载动画——这不仅破坏体验连贯性，也违背“一次性初始化”的设计初衷。
根本原因在于：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 并跳过计数，直接激活动画类——真正实现跨页状态一致性，兼顾用户体验与代码健壮性。
