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

时间:2017-09-06 21:31:25

标签: javascript image reactjs react-dom-server

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

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

网页由ReactDOMServer服务器呈现,<img>元素(有意)已经存在于初始HTML文档中。但是,他们的onLoad事件处理程序不是。我相信这是ReactDOMServer功能

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

有没有办法确保在基础图像之后调用在{React-rendered onLoad元素中设置的onLoad事件处理程序始终完成加载?

我最重要的限制是我想使用React,服务器呈现的HTML页面需要包含<img>元素 正确设置的<img>属性。

1 个答案:

答案 0 :(得分:0)

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