React：ロード後の画像を切り替える

Question

私はいくつかの画像で構成されたコンポーネントを持っています。ユーザーがアクションを実行すると、これらのイメージをリロードする必要があります。

現時点ではversionプロパティをpropsに渡すことで、画像パスにクエリパラメータとして追加されています。ユーザーがアクションを実行すると、これが更新され、新しい一連のイメージがロードされます。

versionのプロパティが更新され、コンポーネントの画像が白くなり、個別に読み込みが始まり、非常にうまく見えません。理想的には、すべての新しい画像がロードされるまで（おそらくコンポーネントの上にオーバーレイされたローディングインジケータが表示されるまで）古い画像を残しておき、一度にすべての画像を切り替えるのが理想的です。

これはどのようにReact内で扱われますか？

Answer 1

OKこれはDOMにダミーイメージ（表示しないでください）を入れて、それをonLoadイベントで待ち受けます。それが発生すると、「実際の」画像要素のsrc（手動で、すなわち状態を介さずに）を更新する。

const IMG_WIDTH = 320; 
const IMG_HEIGHT = 240; 
const baseImageUrl = `http://loremflickr.com/${IMG_WIDTH}/${IMG_HEIGHT}`; 

const pics = [ 
    'https://img1.wsimg.com/fos/sales/cwh/8/images/cats-with-hats-shop-02.jpg', 
    'https://img1.wsimg.com/fos/sales/cwh/8/images/cats-with-hats-og-image.jpg', 
    'http://www.dispatch.com/content/graphics/2015/05/08/2-cats-in-hats-crafts-art-gof11etjd-1crafts-cats-in-hats-jpeg-03592-jpg.jpg', 
    'http://www.dispatch.com/content/graphics/2015/05/08/2-cats-in-hats-crafts-art-gof11etjd-1crafts-cats-in-hats-jpeg-0b417-jpg.jpg', 
    'https://i.ytimg.com/vi/cNycdfFEgBc/maxresdefault.jpg' 
]; 

// this should really be hidden 
// leaving it visible for, um, visibility 
const hiddenImageStyle = { 
    width: 100, 
    height: 100, 
}; 

class Image extends React.Component { 
    constructor(props) { 
    super(props); 
    this.onNextImageLoad = this.onNextImageLoad.bind(this); 
    this.nextImageUrl = pics[0]; 
    } 

    onNextImageLoad() { 
    this.visibleImgEl.src = this.nextImageUrl; 
    } 

    render() { 
    this.nextImageUrl = pics[this.props.imageIndex % 5]; 

    return (
     <div> 
     <img 
      ref={el => this.visibleImgEl = el} 
      width={IMG_WIDTH} 
      height={IMG_HEIGHT} 
      src={pics[0]} 
     /> 

     <img 
      style={hiddenImageStyle} 
      src={this.nextImageUrl} 
      onLoad={this.onNextImageLoad} 
     /> 
     </div> 
    ); 
    } 
} 

class ImageController extends React.Component { 
    constructor(props) { 
    super(props); 

    this.goToNextImage = this.goToNextImage.bind(this); 

    this.state = { 
     imageIndex: 0, 
    }; 
    } 

    goToNextImage() { 
    this.setState({imageIndex: this.state.imageIndex + 1}); 
    } 

    render() { 
    return (
     <div> 
     <Image imageIndex={this.state.imageIndex} /> 

     <button onClick={this.goToNextImage}> 
      Next image 
     </button> 
     </div> 
    ); 
    } 
}; 

ReactDOM.render(<ImageController/>, document.getElementById('app')); 

jsbin：https://jsbin.com/ramoxa/2