同步多個圖像的onLoad與之反應

比方說，我有使用Andrew Farmer's example image component當每個個體圖像加載檢測圖像的數目不詳：同步多個圖像的onLoad與之反應

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;

使用諸如焊劑或終極版的框架，有什麼最簡單的方法來同步所有圖像組件，以檢測何時加載完所有圖像？

來源

2016-01-29 Aaron Tribou

使計數器減少可能是有意義的。對於每個圖像，您可以派發一個動作來增加中的imagesOnPage計數器，然後調度一個動作以在handleImageMounted中增加loadedImagesOnPage。而對於handleImageErrored，您可以遞減imagesOnPage。當imagesOnPage === loadedImagesOnPage時，所有圖像都被加載。

更健壯的方法是爲每一個圖像一個唯一的ID，並有一個images減速器與每個鍵是唯一的ID和價值是它的狀態： { image_1234: 'loading', image_111: 'loaded', image_12: 'error' } 你可以寫一些實用程序通過看減速器並查看是否所有圖像都處於loaded狀態。

來源

2016-01-30 17:59:13

同步多個圖像的onLoad與之反應

回答

相關問題