我過去經(jīng)常會(huì)問：

有沒有一種方法去判斷子類組件是否已經(jīng)渲染完成？

答案當(dāng)然是有的啦 ?componentDidMount()，在react component 已經(jīng)渲染完成時(shí)?就會(huì)調(diào)用?componentDidMount()方法

如果你對(duì)??componentDidMount() 不太熟悉， 那么建議你去看看react組件的生命周期(React Component Lifecycle Methods)，哪里每一個(gè)方法你早晚都會(huì)用到的。

稍微多了解一些，你會(huì)意識(shí)到提問者真的想要知道的是圖片何時(shí)才算已經(jīng)完成加載了，以react已經(jīng)渲染了標(biāo)簽為標(biāo)準(zhǔn)是不能拿來判斷圖片已經(jīng)加載完成的。

讓我們來建立幾個(gè)簡(jiǎn)單的定義來理解rendered 和?loaded：rendered(也叫渲染完成)：react 已經(jīng)把你的虛擬DOM元素轉(zhuǎn)化到真實(shí)DOM元素中并和真實(shí)的DOM建立起連接。

loaded：指圖片數(shù)據(jù)或者其他來自服務(wù)器端等遠(yuǎn)程客戶端上的內(nèi)容已經(jīng)下載完成了(或者已經(jīng)下載失敗了)

如果你還不都清楚，簡(jiǎn)單的說，render 總是會(huì)在 load 之前

為什么要等待一個(gè)圖片加載？

額， 也許當(dāng)你的圖片已經(jīng)加載完了后你希望：

隱藏loading圖標(biāo)。

自動(dòng)加載更多圖片。

轉(zhuǎn)化UI，使圖片更加凸顯。

或者其他理由

想要找出如何判斷圖片加載事件的方法，那么就接著往下讀吧。

onLoad & onError

onload 和 onerror這兩個(gè)屬性以及可以正常的在DOM標(biāo)簽上使用了(HTMLImageElement)，react 要使用駝峰格式來獲取這個(gè)事件，這也是onLoad?and?onError的來由。react的文檔中已經(jīng)提倡這么用了，但并沒有討論具體為什么要這么用(Image Events)

所以你只要添加?onLoad?and?onError這兩個(gè)事件在你的react 標(biāo)簽中就行了。如果還是不夠清楚，那么看看下面的代碼栗子吧！

Short Example

這里是一個(gè)關(guān)于使用 onLoad 事件的簡(jiǎn)短的栗子， 想看更多詳細(xì)的關(guān)于如何顯示loading圖直到圖標(biāo)加載完成的栗子， 就看看作者的下一篇文章(React Image Gallery)

下面的這個(gè)組件，?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;

它相當(dāng)短吧。好好理解吧，希望對(duì)你們有用(這段話是譯者瞎嗶嗶的)

原文：http://www.cnblogs.com/anhaiming/p/5456154.html

總結(jié)

以上是生活随笔為你收集整理的react 判断图片是否加载完成_如何判断图片（img）是否已经加载成功--基于react...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。