本文教你通过 localstorage 持久化记录加载状态，使网站在用户跳转至 about.html 或返回 index.html 时不再重复执行加载动画，仅首次访问触发一次，提升用户体验与性能。
你遇到的问题本质是：每个 HTML 页面（如 index.html 和 about.html）都是独立加载的，JavaScript 在每次页面刷新/跳转后都会重新执行 counter() 函数，导致加载动画反复播放。而真正的目标并非“禁用动画”，而是 “只在用户首次访问网站时执行一次加载流程，后续页面跳转跳过该过程”。
解决思路非常清晰：利用浏览器的 localStorage 存储一个标记（例如 'loadedOnce': 'true'），在动画完成时写入；每次页面加载时先检查该标记——若已存在，则直接跳过计数器，立即应用动画类；否则执行完整加载逻辑。
以下是优化后的完整实现方案：
✅ 正确做法：基于 localStorage 的单次加载控制
0
// 加载动画主函数（带持久化判断）
function initLoadingAnimation() {
const loadNo = document.getElementById('load-no');
const load = document.getElementById('load');
// ✅ 关键：检查是否已加载过
if (localStorage.getItem('loadedOnce') === 'true') {
// 已加载 → 立即隐藏加载屏并应用动画类（模拟已完成状态）
load.classList.add('loaded'); // 可配合 CSS 过渡
applyAnimations();
return;
}
// ❌ 首次访问 → 执行计数动画
let number = 0;
const counts = setInterval(() => {
number++;
loadNo.textContent = number;
if (number === 100) {
clearInterval(counts);
localStorage.setItem('loadedOnce', 'true'); // ✅ 标记已加载
applyAnimations();
}
}, 30); // 每30ms +1%，全程约3秒（100×30ms）
}
// ✅ 提取动画逻辑为独立函数，便于复用
function applyAnimations() {
const load = document.getElementById('load');
const ev_logo = document.getElementById('ev-logo');
const nav_a_select = document.querySelectorAll('.nav-a');
const fb_icon = document.querySelector('.fb-icon');
const github_icon = document.querySelector('.github-icon');
const line_h = document.querySelector('.line-h');
const line_v = document.querySelector('.line-v');
const copyright_icon = document.querySelector('.copyright-icon');
const year = document.querySelector('.year');
const name = document.querySelector('.name');
const earl_villarias = document.querySelector('.earl-villarias');
const slogan_text = document.querySelector('.slogan-text');
const slogan_line_select = document.querySelectorAll('.slogan-line');
// 隐藏加载层（可配合 CSS transition）
load.style.pointerEvents = 'none';
load.style.opacity = '0';
load.style.transition = 'opacity 0.5s ease-out';
// 触发各类元素动画类
if (ev_logo) ev_logo.style.transform = 'translate3d(0, 0, 0)';
if (fb_icon) fb_icon.classList.add('fb-icon-s');
if (github_icon) github_icon.classList.add('github-icon-s');
if (line_h) line_h.classList.add('line-expand-h');
if (line_v) line_v.classList.add('line-expand-v');
if (copyright_icon) copyright_icon.classList.add('icon-year-s');
if (year) year.classList.add('icon-year-s');
if (name) name.classList.add('name-s');
if (earl_villarias) earl_villarias.classList.add('name-show');
if (slogan_text) slogan_text.classList.add('slogan-show');
nav_a_select.forEach(el => el.classList.add('s-d'));
slogan_line_select.forEach(el => el.classList.add('slogan-line-expand'));
}
// 启动加载逻辑
document.addEventListener('DOMContentLoaded', initLoadingAnimation);⚠️ 注意事项 & 最佳实践
- 不要用 location.href 跳转替代 SPA 导航：如果你使用纯 HTML 多页（），浏览器必然刷新页面，此时 localStorage 是唯一可靠的跨页状态方案。若追求更流畅体验，建议未来升级为 SPA（单页应用），用 history.pushState() + 动态内容替换，彻底规避重复加载。
- 清除测试缓存：开发时若修改了 localStorage 逻辑，记得在浏览器控制台执行 localStorage.removeItem('loadedOnce') 或按 Ctrl+Shift+Del 清除站点数据，避免误判。
-
CSS 配合建议：
#load { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 9999; display: flex; justify-content: center; align-items: center; transition: opacity 0.5s; } #load.loaded { opacity: 0; pointer-events: none; } #load-wrapper { text-align: center; } #load-no { font-size: 4rem; color: #fff; font-weight: bold; }
✅ 总结
你不需要删除任何页面中的 #load 结构，也不必放弃多页架构。只需引入两行关键逻辑：
① 读取 localStorage 判断是否首次访问；
② 动画完成时写入 'loadedOnce': 'true'。
从此，无论用户从首页跳转到关于页，还是从外部链接直达任一子页，加载动画都只会优雅地执行一次——专业、轻量、兼容性好，完美匹配新手进阶需求。
