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

原文地址： http://andrewhfarmer.com/detect-image-load/ 

我过去经常会问：

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

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

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

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

让我们来建立几个简单的定义来理解rendered 和 loaded：

rendered（也叫渲染完成）：react 已经把你的虚拟DOM元素转化到真实DOM元素中并和真实的DOM建立起连接。

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

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

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

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

• 隐藏loading图标。
• 自动加载更多图片。
• 转化UI，使图片更加凸显。
• 或者其他理由

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

onLoad & onError

onload 和 onerror   这两个属性以及可以正常的在DOM<img>标签上使用了（HTMLImageElement），react 要使用驼峰格式来获取这个事件，这也是onLoad and onError的来由。react的文档中已经提倡这么用了，但并没有讨论具体为什么要这么用（Image Events）

 所以你只要添加 onLoad and onError这两个事件在你的react <img>标签中就行了。如果还是不够清楚，那么看看下面的代码栗子吧！

 

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 (
      <div>
        <img
          src={this.props.imageUrl}
          onLoad={this.handleImageLoaded.bind(this)}
          onError={this.handleImageErrored.bind(this)}
          />
        {this.state.imageStatus}
      </div>
    );
  }
}
export default ImageWithStatusText;

它相当短吧。好好理解吧，希望对你们有用（这段话是译者瞎哔哔的）