React应用移动端加载器无限加载，PC端正常，求原因与解决方案

原因分析 #

• 移动端浏览器对window.load事件的触发逻辑存在差异：部分移动端浏览器（比如iOS Safari）不会像PC端那样稳定触发window.load——当页面图片、字体等资源加载缓慢，或是受浏览器缓存策略影响时，该事件可能延迟触发甚至完全不执行，导致handleLoading从未被调用，loading状态始终为true，加载器无限显示。
• React组件挂载与window.load的时序冲突：React组件完成挂载时，DOM已经就绪，但window.load需要等待所有外部资源加载完成。移动端网络环境或设备性能较弱时，资源加载耗时更长，就会出现组件已渲染但加载器无法关闭的情况。

可行解决方案 #

方案1：用React组件挂载时机替代window.load #

如果加载器仅用于等待页面初始化完成，React组件挂载完成（useEffect空依赖回调）就代表DOM就绪，无需等待所有资源加载。修改代码如下：

const [loading, setLoading] = useState(true);
const submitUnloadedTrace = () => {
  const payload = {
    siteVisitData: {
      siteVisitAt,
      siteLeaveAt: new Date().toISOString(),
      pageVisitData: [...pageVisitData,
        {
          pageName,
          pageVisitAt,
          pageLeaveAt: new Date().toISOString(),
        }]
    },
  };

  if (activityTrace?._id) {
    const { siteVisitData, } = payload;
    api.requestUpdateActivityTrace({ siteVisitData, id: activityTrace._id });
  }
};

useEffect(() => {
  // 组件挂载完成后直接关闭加载器
  setLoading(false);
  window.addEventListener('beforeunload', submitUnloadedTrace);
  
  return () => {
    window.removeEventListener('beforeunload', submitUnloadedTrace);
    submitUnloadedTrace();
  };
}, []);

{ loading && <BrandAnimation /> }

方案2：保留window.load并添加超时兜底 #

如果必须等待所有资源加载完成，给window.load事件添加超时机制，避免无限等待：

const [loading, setLoading] = useState(true);
const submitUnloadedTrace = () => {
  const payload = {
    siteVisitData: {
      siteVisitAt,
      siteLeaveAt: new Date().toISOString(),
      pageVisitData: [...pageVisitData,
        {
          pageName,
          pageVisitAt,
          pageLeaveAt: new Date().toISOString(),
        }]
    },
  };

  if (activityTrace?._id) {
    const { siteVisitData, } = payload;
    api.requestUpdateActivityTrace({ siteVisitData, id: activityTrace._id });
  }
};

useEffect(() => {
  // 设置3秒超时兜底，避免无限加载
  const timeoutId = setTimeout(() => setLoading(false), 3000);

  const handleLoading = () => {
    clearTimeout(timeoutId);
    setLoading(false);
  };

  window.addEventListener('load', handleLoading);
  window.addEventListener('beforeunload', submitUnloadedTrace);

  return () => {
    window.removeEventListener('load', handleLoading);
    window.removeEventListener('beforeunload', submitUnloadedTrace);
    clearTimeout(timeoutId);
    submitUnloadedTrace();
  };
}, []);

{ loading && <BrandAnimation /> }

方案3：优化submitUnloadedTrace的请求可靠性（附加优化） #

移动端浏览器在页面卸载时，同步API请求可能被终止，导致数据提交失败。改用navigator.sendBeacon发送请求，确保页面卸载时请求能完成：

const submitUnloadedTrace = () => {
  const payload = {
    siteVisitData: {
      siteVisitAt,
      siteLeaveAt: new Date().toISOString(),
      pageVisitData: [...pageVisitData,
        {
          pageName,
          pageVisitAt,
          pageLeaveAt: new Date().toISOString(),
        }]
    },
  };

  if (activityTrace?._id) {
    // 使用sendBeacon确保请求在页面卸载时能被处理
    navigator.sendBeacon(
      '/your-api-endpoint',
      JSON.stringify({
        siteVisitData: payload.siteVisitData,
        id: activityTrace._id
      })
    );
  }
};

内容的提问来源于stack exchange，提问作者Arnab Shikder