如果我使用 javascript 预加载图像，当我在 <img> 标签中使用它时会加载它吗？

Question

我遇到小图片加载速度非常慢的问题，所以我想我应该尝试将它预加载到浏览器缓存中。我查了一下，发现有很多方法可以异步预加载图像，但有两件事还不清楚。假设我有一组图像文件名（假设每个元素都是正确的完整路径）

const images = ['img1.png','img2.png','img3.png']

中学到的知识预加载图像

function preLoad(){
  images.forEach(img => {
    const myImage = new Image()
    myImage.onload = (img) => myImage.src = img
  })
}
preload()

请注意，我没有将任何图像对象存储在变量或数组中。该过程完成后，图像是否已缓存并仅通过引用文件名就可以使用？例如，如果我尝试

document.getElementById('image-container').innerHTML = `<img src="${images[0]}" alt="${images[0]}>`

它会立即显示图像吗？由于此方法不使用任何异步方法（回调、承诺、async/await），我如何知道该过程已完成并且图像已准备好使用？

Answer 1

我曾经遇到过类似的问题并已发布。我用了<link rel="preload" as="image" href="cards/PNG/2C.png"> 来实现预加载

我想您的 JavaScript 功能也是如此。如果是这样，浏览器会在显示页面之前加载所有图像，因此它可以不间断地显示图像。

为了能够检查这是否真的发生了什么，请“检查”您的页面，在源选项卡中，您应该能够看到浏览器加载的所有文件，包括您的图像，并且它使用与以下文件相同的文件层次结构你在你的代码中做了。

If I preload an image using javascript will it then be loaded when I use it in a <img> tag?