页面加载后反应调用功能

Question

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

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

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

我尝试将加载功能放在一个单独的组件中，然后按如下所示进行加载：

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

但是那没有用，而且看起来也很hacky。页面加载后如何加载图像？

Answer 1

似乎需要异步加载图像。

幸运的是，它内置在React Native随附的Image类中（当然，我假设这就是您正在使用的东西）。

请参见documentation，尤其是onLoad，onLoadStart和onLoadEnd回调。这些应该使您能够在图像加载之前使用占位符，并且仅在加载完成后才显示它们。