React - 在显示组件之前等待来自 CDN 的资产？

Question

我正在从外部 CDN 加载样式表，以便在 React 中设置一个页面的样式。 样式表链接被注入<head > 使用react-helmet ：

<Helmet>
  <link rel="stylesheet" href="example.com/site.css" />
</Helmet>

不幸的是，在加载样式表之前，有几毫秒可见的 FOUC。 我正在集成一个外部服务，所以我无法以任何其他方式真正加载样式。

我试过使用useEffect挂钩并仅在准备就绪时呈现页面，如下所示：

const [isPageReady, setPageReady] = useState(false);

useEffect(() => {
  setPageReady(true);
}, []);

return ( 
  isPageReady && ( // my page );
)

但是 FOUC 仍然存在。 有没有办法在我显示页面之前等待样式表加载？

Answer 1

根本问题是 CSS 仍在加载，而第一个组件已经在屏幕上。 通常这只需要几分之一秒，所以您可能只想隐藏您的组件，直到 DOM 完全呈现。

为此，您可以将所有内容封装在一个顶级 div 中，该 div 在 document.readyState 等于完成之前是不可见的。 这样，DOM 的渲染将不可见，第一个暴露的屏幕将是一个完全渲染的文档。

const [visible, setVisible] = useState('hidden');

// This will run one time after the component mounts
useEffect(() => {
  const onPageLoad = () => {
    setVisible('visible');
  };
  // Check if the page has already loaded
  if (document.readyState === 'complete') {
    onPageLoad();
  } else {
    window.addEventListener('load', onPageLoad);
    // Remove the event listener when component unmounts
    return () => window.removeEventListener('load', onPageLoad);
  }
}, []);

return (
  <div style={{ visibility: visible }}>
    <YourPage />
  </div>
);

React - 在显示组件之前等待来自 CDN 的资产？

问题描述

1 个解决方案

解决方案1
0 2023-01-20 01:22:15

React - 在显示组件之前等待来自 CDN 的资产？

问题描述

1 个解决方案

解决方案1 0 2023-01-20 01:22:15

解决方案1
0 2023-01-20 01:22:15