如果我使用 javascript 预加载图像，那么当我在<img>标签？

Question

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

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

我使用从使用 JavaScript预加载图像中学到的知识来预加载图像

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]}>`

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

Answer 1

我曾经遇到过类似的问题，并已将其张贴在这里。 我使用<link rel="preload" as="image" href="cards/PNG/2C.png">来实现预加载。

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

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