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