页面加载后反应调用功能

时间:2019-04-01 16:16:22

标签: javascript reactjs

我想在我的组件之一中显示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。页面加载后如何加载图像?

1 个答案:

答案 0 :(得分:0)

似乎需要异步加载图像。

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

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