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

我过去常常会问：react

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

git

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

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

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

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

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

若是你还不都清楚，简单的说，render 老是会在 load 以前component

为何要等待一个图片加载？htm

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

隐藏loading图标。

自动加载更多图片。

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

或者其余理由

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

onLoad & onError

onload 和 onerror这两个属性以及能够正常的在DOM标签上使用了(HTMLImageElement)，react 要使用驼峰格式来获取这个事件，这也是onLoad and onError的来由。react的文档中已经提倡这么用了，但并无讨论具体为何要这么用(Image Events)

因此你只要添加 onLoad and onError这两个事件在你的react 标签中就好了。若是仍是不够清楚，那么看看下面的代码栗子吧！

Short Example

这里是一个关于使用 onLoad 事件的简短的栗子， 想看更多详细的关于如何显示loading图直到图标加载完成的栗子， 就看看做者的下一篇文章(React Image Gallery)

下面的这个组件， ImageWithStatusText， 加载一张图片和和显示一段文本：'loaded' 或者 'failed to load'

import React from 'react';

class ImageWithStatusText extends React.Component {

constructor(props) {

super(props);this.state = { imageStatus: null};

}

handleImageLoaded() {this.setState({ imageStatus: 'loaded'});

}

handleImageErrored() {this.setState({ imageStatus: 'failed to load'});

}

render() {return(

src={this.props.imageUrl}

onLoad={this.handleImageLoaded.bind(this)}

onError={this.handleImageErrored.bind(this)}/>

{this.state.imageStatus}

);

}

}

exportdefault ImageWithStatusText;

它至关短吧。好好理解吧，但愿对大家有用(这段话是译者瞎哔哔的)