react 判断图片是否加载完成_如何判断图片（img）是否已经加载成功--基于react...

我过去经常会问：

有没有一种方法去判断子类组件是否已经渲染完成？

答案当然是有的啦  componentDidMount()，在react component 已经渲染完成时 就会调用 componentDidMount()方法

如果你对  componentDidMount() 不太熟悉， 那么建议你去看看react组件的生命周期(React Component Lifecycle Methods)，哪里每一个方法你早晚都会用到的。

稍微多了解一些，你会意识到提问者真的想要知道的是图片何时才算已经完成加载了，以react已经渲染了标签为标准是不能拿来判断图片已经加载完成的。

让我们来建立几个简单的定义来理解rendered 和 loaded：rendered(也叫渲染完成)：react 已经把你的虚拟DOM元素转化到真实DOM元素中并和真实的DOM建立起连接。

loaded：指图片数据或者其他来自服务器端等远程客户端上的内容已经下载完成了(或者已经下载失败了)

如果你还不都清楚，简单的说，render 总是会在 load 之前

为什么要等待一个图片加载？

额， 也许当你的图片已经加载完了后你希望：

隐藏loading图标。

自动加载更多图片。

转化UI，使图片更加凸显。

或者其他理由

想要找出如何判断图片加载事件的方法，那么就接着往下读吧。

onLoad & onError

onload 和 onerror这两个属性以及可以正常的在DOM标签上使用了(HTMLImageElement)，react