如何在Remix中无需useEffect实现浏览器加载完成前显示加载屏

你可以通过监听浏览器的load事件来实现这个需求，这个事件会在所有页面资源（包括图片、脚本、样式等）都加载完成后触发，也就是标签栏加载图标停止转动的时机。下面是适配你现有Remix组件的实现方案：

import { Outlet, useEffect, useState } from '@remix-run/react';
import { loader } from '~/routes/_index';

export default function RandomImageLayout() {
  // 控制加载屏显示状态，初始默认显示
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 处理页面已缓存完成的情况，避免加载屏无效停留
    if (document.readyState === 'complete') {
      setIsLoading(false);
      return;
    }

    // 加载完成后隐藏加载屏
    const handleLoad = () => {
      setIsLoading(false);
    };

    // 绑定全局加载完成事件
    window.addEventListener('load', handleLoad);

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      window.removeEventListener('load', handleLoad);
    };
  }, []);

  return (
    <>
      {/* 全局加载屏：覆盖整个视口 */}
      {isLoading && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          width: '100vw',
          height: '100vh',
          backgroundColor: '#f5f5f5',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          zIndex: 9999,
          fontSize: '1.2rem'
        }}>
          页面加载中...
        </div>
      )}

      <img
        src="https://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg"
        alt="Random Image"
        style={{ maxWidth: '100%' }}
      />
      <Outlet />
    </>
  );
}

核心细节说明： #

• document.readyState === 'complete'：提前判断页面是否已经加载完成（比如资源从浏览器缓存读取的场景），避免加载屏不必要的显示。
• 加载屏使用fixed定位+高z-index，确保它能覆盖所有页面内容，直到加载完成后隐藏。
• 你可以根据需求修改加载屏的样式，比如替换成加载动画图标、调整背景色或文字样式。

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