检测何时加载反应渲染的图像答案

【问题标题】：Detect when a react-rendered image loads检测何时加载反应渲染的图像
【发布时间】：2018-02-15 12:00:41
【问题描述】：

我有一个用于渲染自定义图像的 React 组件。在简化的形式中，它看起来像这样：

function MyImage(props) {
  return <img src={props.src} onLoad={props.onLoad} />
}

网页由ReactDOMServer 服务器渲染，<img> 元素（有意）已经存在于初始 HTML 文档中。但是，他们的onLoad 事件处理程序不是。我相信这是ReactDOMServer 的一个功能。

有时会发生的情况是，一些自定义图像，尤其是较小的图像，可以完成加载在 JavaScript 加载之前或在它开始运行之前，或者至少在 React 设置 onLoad 之前事件处理程序。因此，这些图像上的onLoad 事件不会导致调用任何事件处理程序。

有没有办法确保在 React 渲染的 <img> 元素中设置的 onLoad 事件处理程序在底层图像完成加载后始终被调用？

我最重要的限制是我想使用 React 并且服务器渲染的 HTML 页面需要包含 <img> 元素它们的 src 属性设置正确。

【问题讨论】：

【解决方案1】：

您可以将onLoad 处理程序移动到componentDidMount() 方法。见docs

【讨论】：

我不明白您的确切意思以及它如何帮助解决我的特定问题。请澄清。
我仍然需要在图像完成加载时调用 onLoad 事件处理程序，因此我无法将事件处理程序从 <img> 元素“移开”。您的意思是在componentDidMount 中手动调用事件处理程序（如果image.complete 为真）？
可以从componentDidMount 阶段访问DOM，这意味着您的图像应该已经完成加载。所以，是的，我的意思是手动调用其中的事件处理程序。
图像不一定要在调用componentDidMount 时完成加载。它只会出现在 DOM 中。但无论如何，检查它是否已完全加载并最终在需要时调用onLoad 处理程序应该会有所帮助。请更新您的答案，以便清楚您的意思。