如何判斷圖片（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;

它至關短吧。好好理解吧，但願對大家有用（這段話是譯者瞎嗶嗶的）