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

我寻找了一个类似这样的解决方案，但我就是找不到它，所以我问这个问题，如果有人能帮忙的话

这是我制作的一个沙盒，想法是这样的：我想显示一个加载文本，直到我的组件（比如说整个网站：包括图像、文本等等）完全加载，尝试使用useEffect钩子制作，但useEffect只显示加载文本，直到组件安装完毕，钩子就会这样做，但是这个组件中还有一些像图像这样的东西还没有完全加载，所以这不是我想要的方式。如果有人知道实现这一点的方法，我将不胜感激。网络上有很多信息可以通过设置超时来实现这一点，但我认为这是一种有点棘手/虚假的方法，因为加载微调器应该根据ISP的速度显示，对吗？因此，对于互联网连接更好的用户，加载文本/微调器的时间将更短，而对于其他用户，加载文本/微调器的时间将更长

---

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

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);
});

---

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

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);
});

---

您可以有一个“加载”状态，该状态一开始为true，然后使用onload函数更改其值

您可以这样使用它：

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

---

Onload在其所有子内容加载完毕后执行。您可以在

上了解更多关于这方面的信息。您可以先获得一个为真的“加载”状态，然后使用onload函数更改其值

您可以这样使用它：

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

---

Onload在其所有子内容加载完毕后执行。您可以在

上了解更多关于这方面的信息，我以前尝试过这样做，不是在包含img标记的div中，而是在img标记内部，它对我不起作用，因为组件未安装，因此img从不加载，也从不触发onload事件。明天我会试试这个替代方案，然后告诉你这是否有效！谢谢，我以前尝试过这样做，不是在包含img标记的div中，而是在img标记内部，它对我不起作用，因为组件没有安装，因此img从不加载，onload事件从不触发。明天我会试试这个替代方案，然后告诉你这是否有效！谢谢你，谢谢你的回答，这是一个新的尝试：），我明天会尝试，并告诉你它是否有效：）不客气。谢谢你的回答，这是一个新的尝试：），我明天会尝试，并告诉你它是否有效：）不客气。