從 URL React 預加載圖像

Question

我從 API 獲取圖像 url 列表，並在輪播中一一顯示。 我做<img src={url} /> 。 但是使用此解決方案，我的圖像總是需要在出現時加載。 然后我想在我的 API 調用之后將它們預加載到 ComponentDidMount 中。 也許像“庫存”它們之類的東西。

下面的方法我也嘗試過，但不起作用

.then(result => {
  result.forEach(element => {
      const image = element.image.fileName;
      element.image = new Image();
      element.image.src = image;
  });
  console.log(result)

  this.setState({loading: false, error: null, partners: result});
})

提前致謝

編輯：在我得到這個結果之前用我寫的代碼截圖，如果寫<img src={url}我的圖像需要幾毫秒才能加載。 並扼殺用戶體驗。 在下面的第一張圖片中，您可以看到數組。 圖像中有圖像，如果我單擊圖像，則會在第二個屏幕截圖中顯示警告。

Answer 1

我認為您缺少的是監聽onload事件。 基本上，您可以等到所有圖像都加載完畢。 同時，您可以顯示加載微調器。

ComponentDidMount()示例代碼：

    // Load all images
    const images = await myAPICall().map(image => new Promise((rs, rj) => {
     const img = new Image();
     img.onload = () => rs(img);
     img.onerror = () => rj();
    }))

  await Promise.all(images)
  this.setState({loading: false})

然后，您可以通過檢查加載是否完成來渲染您的輪播。

PS：我在這里使用 async/await，因此請確保您嘗試/捕獲並在函數前添加async 。