頁面加載后反應調用功能

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回調。 這些應該允許您在圖像加載之前使用占位符，並且只在加載完成后才顯示它們。