预加载器仅在页面刷新后消失的技术问题求助

问题根源 #

你的页面属于单页应用（SPA），点击首页链接是客户端路由跳转，不会触发浏览器的window.load事件——这个事件仅在页面刷新（全量加载）时才会触发，因此原来的jQuery代码只有刷新页面时才生效，导致预加载器始终无法自动消失。

你尝试的useEffect监听URL变化方案，因直接设置display: none覆盖了CSS的过渡/动画逻辑，且违背了SPA的状态管理原则，才会出现CSS失效的问题。

解决方案（React场景推荐） #

利用React的状态管理控制预加载器的显示/隐藏，避免直接操作DOM，同时保留动画效果：

1. 布局组件中维护加载状态 #

import { useState, useEffect } from 'react';
import { useLocation } from 'react-router-dom';

// 全局布局组件，包裹所有页面内容
function AppLayout({ children }) {
  const [isLoading, setIsLoading] = useState(false);
  const location = useLocation();

  useEffect(() => {
    // 路由切换开始时，显示预加载器
    setIsLoading(true);

    // 模拟内容加载完成（实际项目中可替换为真实数据加载的回调）
    const loadTimer = setTimeout(() => {
      setIsLoading(false);
    }, 600); // 时长匹配你的预加载动画时长

    return () => clearTimeout(loadTimer);
  }, [location.pathname]);

  return (
    <>
      {/* 预加载器：仅在isLoading为true时渲染 */}
      {isLoading && (
        <div className="preloader">
          <div className="ball ball-1"></div>
          <div className="ball ball-2"></div>
          <div className="ball ball-3"></div>
        </div>
      )}
      {children}
    </>
  );
}

2. 保留CSS动画逻辑 #

在CSS中通过类控制过渡效果，避免直接修改DOM样式：

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 9999;
}

/* 利用React的状态卸载组件替代手动隐藏，也可扩展类名控制：
.preloader.hidden {
  opacity: 0;
  visibility: hidden;
}
*/

.ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333333;
  margin: 0 6px;
  animation: bounce 1s infinite alternate;
}

.ball-1 { animation-delay: 0s; }
.ball-2 { animation-delay: 0.2s; }
.ball-3 { animation-delay: 0.4s; }

@keyframes bounce {
  from { transform: translateY(0); }
  to { transform: translateY(-22px); }
}

备选方案（混用jQuery，不推荐） #

如果必须保留原有jQuery逻辑，可在路由切换时手动触发淡出效果：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import $ from 'jquery';

function App() {
  const location = useLocation();

  useEffect(() => {
    // 路由切换时先显示预加载器
    $('.preloader').show();
    // 内容加载完成后执行淡出并移除
    setTimeout(() => {
      $('.preloader').fadeOut('slow', function() {
        $(this).remove();
      });
    }, 600);
  }, [location.pathname]);

  return (
    {/* 页面内容 */}
  );
}

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