我想在我的组件之一中显示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。页面加载后如何加载图像?
答案 0 :(得分:0)
似乎需要异步加载图像。
幸运的是,它内置在React Native随附的Image类中(当然,我假设这就是您正在使用的东西)。
请参见documentation,尤其是onLoad,onLoadStart和onLoadEnd回调。这些应该使您能够在图像加载之前使用占位符,并且仅在加载完成后才显示它们。