显示加载文本/微调器，直到组件在 React 中完全加载文本、图像...等

如何解决显示加载文本/微调器，直到组件在 React 中完全加载文本、图像...等

我搜索了这样的解决方案，但我无法正确找到它，所以我问这个问题是否有人可以提供帮助。

这是我制作的沙盒，想法是这样的：我想显示加载文本，直到我的组件（假设整个网站：包括图像、文本......等）完全加载，尝试使用 useEffect 钩子来实现这一点，但是 useEffect 只显示加载文本，直到组件被安装，钩子会这样做，但是这个组件中的图像之类的东西还没有完全加载，所以这不起作用我想要。如果有人知道如何进行这项工作，我会很感激Spinner 应该根据您的 ISP 的速度显示对吗？因此，对于互联网连接较好的用户，加载文本/微调器的时间会更短，而对于其他用户，则会更长。

Link to Sandbox

解决方法

您可以在组件上使用以下功能：

document.onreadystatechange = function () {
  if (document.readyState === 'complete') {
    console.log("do something");
  }
}

或使用

控制所有文档的加载周期

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    // But sub-resources such as scripts,images,stylesheets and frames are still loading.
   console.log('do something')
    break;
  case "complete":
    // The page is fully loaded.
    console.log("do something");
    break;
}

如果需要，您也可以使用此功能：

window.addEventListener("load",event => {
  var image = document.querySelector('img');
  var isLoaded = image.complete && image.naturalHeight !== 0;
  console.log(isLoaded);
});

,

你可以有一个“加载”状态，一开始是真的，然后用 onload 函数改变它的值。

你可以这样使用它：

<div onload={setLoading(false)}>
   <img src="..." />
   <img src="..." />
   <img src="..." />
</div>

Onload 在所有子内容加载完毕后执行。您可以在 https://www.w3schools.com/tags/ev_onload.asp

阅读更多相关信息