多页面加载动画重复解决方法

大家好，今天本人给大家带来文章《多页面加载动画重复问题解决方案》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

本文教你通过 localStorage 持久化记录加载状态，使网站在用户跳转至 about.html 或返回 index.html 时不再重复执行加载动画，仅首次访问触发一次，提升用户体验与性能。

你遇到的问题本质是：每个 HTML 页面（如 index.html 和 about.html）都是独立加载的，JavaScript 在每次页面刷新/跳转后都会重新执行 counter() 函数，导致加载动画反复播放。而真正的目标并非“禁用动画”，而是 “只在用户首次访问网站时执行一次加载流程，后续页面跳转跳过该过程”。

解决思路非常清晰：利用浏览器的 localStorage 存储一个标记（例如 'loadedOnce': 'true'），在动画完成时写入；每次页面加载时先检查该标记——若已存在，则直接跳过计数器，立即应用动画类；否则执行完整加载逻辑。

以下是优化后的完整实现方案：

✅ 正确做法：基于 localStorage 的单次加载控制

<!-- 所有页面共用的加载结构（保持不变） -->
<div id="load">
  <div id="load-wrapper">
    <div id="load-no">0</div>
  </div>
</div>

// 加载动画主函数（带持久化判断）
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'。
从此，无论用户从首页跳转到关于页，还是从外部链接直达任一子页，加载动画都只会优雅地执行一次——专业、轻量、兼容性好，完美匹配新手进阶需求。

理论要掌握，实操不能落！以上关于《多页面加载动画重复解决方法》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！