Javascript 反应：加载后切换图像

我有一个由一些图像组成的组件。当用户执行操作时，需要重新加载这些图像

目前，我通过将

version

属性传递给

props

来实现这一点，该属性作为查询参数附加到图像路径。当用户执行该操作时，将更新该操作并加载一组新图像

问题是，

version

属性更新后，组件中的图像变为白色，并开始单独加载，这看起来不太好。理想情况下，我希望保留旧图像，直到加载所有新图像（可能在组件上覆盖加载指示器），然后立即将它们全部切换出去

---

如何在React中实现这一点？

好，这将在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'));

const IMG_WIDTH=320；
常数IMG_高度=240；
常量baseImageUrl=`http://loremflickr.com/${IMG_WIDTH}/${IMG_HEIGHT}`；
常数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'
];
//这真的应该隐藏起来
//让它可见，嗯，可见
常量hiddenImageStyle={
宽度：100，
身高：100，
};
类映像扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onNextImageLoad=this.onNextImageLoad.bind（this）；
this.nextImageUrl=pics[0]；
}
onNextImageLoad（）{
this.visibleImgEl.src=this.nextImageUrl；
}
render（）{
this.nextImageUrl=pics[this.props.imageIndex%5]；
返回(
);
}
}
类ImageController扩展了React.Component{
建造师（道具）{
超级（道具）；
this.goToNextImage=this.goToNextImage.bind（this）；
此.state={
图像索引：0，
};
}
goToNextImage（）{
this.setState（{imageIndex:this.state.imageIndex+1}）；
}
render（）{
返回(
下一张图片
);
}
};
ReactDOM.render（，document.getElementById（'app'））；

---

jsbin:

这可能会让您了解如何做到这一点：您能发布一些代码吗？下面由David发布的示例基本上就是我想要实现的。不同之处在于，新图像是新生成的，不会被缓存。在Chrome上，新图像加载时，图像会变为白色。您案例中的图像是否可能是由浏览器缓存的，这就是为什么您不会注意到任何闪烁的原因？好吧，更新了我的答案，我没有看到白色闪烁（旧图像会一直保留到新图像加载，即使在缓存关闭和网络限制的情况下），因此测试有点困难。