如何判斷圖片(img)是否已經載入成功--基於react

來源:互聯網
上載者:User

標籤:

原文地址: 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;

它相當短吧。好好理解吧,希望對你們有用(這段話是譯者瞎嗶嗶的)

如何判斷圖片(img)是否已經載入成功--基於react

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.