0

假设我的 HTML 代码中有一个图像，并且只要图像正在加载，我就想显示一个微调器。我可以通过在 JavaScript 中加载图像并在加载后隐藏微调器来做到这一点，例如：

async loadImage(src) {
  return new Promise((resolve, reject) => {
    let img = new Image()
    img.onload = () => resolve(img)
    img.onerror = reject
    img.src = src
  }).catch()
}

let image = document.getElementById('#image1')

loadImage(image.src).then(() => {
  // Image loaded, spinner can be hidden.
})

现在我正在尝试对 HTMLpicture元素做同样的事情。假设我有以下 HTML 代码：

<picture>
  <source srcset="image2.webp" type="image/webp" />
  <source srcset="image2.jpg" type="image/jpg" />
  <img src="image2.jpg" />
</picture>

使用上面的 JavaScript 代码，它将加载img标记的来源，即 JPG 版本。然而，浏览器甚至可能不会选择加载 JPG 版本，而是加载 WebP 版本。我知道图像的currentSrc属性，但是只有在加载图像后，此属性才会应用于图像。

基本上我需要在完全加载之前知道浏览器正在加载哪个图像。有谁知道如何实现这一目标？

4

0 回答 0