页面加载后反应调用功能

Question

我想在我的一个组件中显示onDrop图像。 为了使drop更加无缝，我想像这样预加载图像：

componentDidMount(){
   this.props.photos.forEach(picture => {
      const img = new Image();
      img.src = picture.url;
    });
}

但是我不想通过预加载所有这些图像来减慢我的初始加载时间，因此我只想在加载其他所有图像后加载它们。

我尝试将加载函数放在一个sepperate组件中，然后像这样加载：

const LazyImgLoader = import("./ImgLoader ");
const ImgLoader = React.lazy(() => LazyImgLoader);

但这不起作用，似乎也有点hacky。 如何在我的页面加载后加载我的图像？

Answer 1

看起来好像需要异步加载图像。

令人高兴的是，它内置于React Native提供的Image类中（当然我假设这是你正在使用的）。

请参阅文档 ，特别是onLoad，onLoadStart和onLoadEnd回调。 这些应该允许您在图像加载之前使用占位符，并且只在加载完成后才显示它们。