我搜索了这样的解决方案，但我无法正确找到它，所以我问这个问题是否有人可以提供帮助。
这是我制作的沙盒，想法是这样的：我想显示加载文本，直到我的组件（假设是整个网站：包括图像、文本..等）完全加载、尝试使用 useEffect 钩子进行此操作，但 useEffect 仅在组件安装之前显示加载文本，并且该钩子会执行此操作，但是此组件中的图像之类的内容尚未完全加载，因此无法正常工作我想。如果有人知道使这项工作的方法，我将不胜感激，网络上有很多信息可以使用 setTimeout 制作类似的东西，但我认为这有点棘手/假的方式，因为加载微调器应该根据您的 ISP 的速度显示，对吗？因此对于互联网连接更好的用户，加载文本/微调器的时间会更短，而对于其他用户，加载时间会更长。
【问题讨论】：
标签： reactjs react-hooks spinner loading
您可以在组件上使用以下功能：
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 阅读更多相关信息
【讨论】：