javascript - 如何使用 javascript 或 jQuery 预加载具有多个 srcset 的图像？

Question

我正在尝试构建一个脚本，以使用 jQuery 为我正在处理的小型应用程序预加载图像。

我已经阅读了不同的教程，现在我设法让它像这样工作:

var imageList = ['img1.png', 'img2.png', 'img3.png'];
$.each(imageList, function (index, imageName) {
    var $img = $('<img>')[0];
    $img.onload = function () {
        console.log('loaded');
    };
    $img.src = imgPath + imageName;
}

这很好用。我从我准备的数组中加载图像，然后创建所有 img 标签，然后将它们附加到 DOM 中需要的地方。

不过，我现在想知道，如果我有多个 srcset 的图像，我该如何做类似的事情。

假设我为每张图片设置了 3 个尺寸，但它们可能更多，通常我会在 html 中放置类似这样的内容:

<img srcset="large.jpg 1024w,
      medium.jpg 640w,
      small.jpg 320w"
   sizes="(min-width: 36em) 33.3vw, 100vw"
   src="small.jpg">

现在，我该如何应用预加载呢？

1) 我可以在 Javascript 中为每个图像预加载所有尺寸，但这毫无意义，因为拥有多个 srcset 的全部目的是只加载一个 2) 我可以将 img 标签放在 DOM 中，让浏览器选择所需的唯一大小并从 Javascript 加载。

第二个选项的问题是浏览器正在从 DOM 加载图像，那么为什么要用 Javascript 再次加载它们呢？有可能我完全错了，也许我遗漏了什么。正确的做法是什么？

Answer 1

您可以使用与脚本中相同的想法，但要设置 sizes 和 srcset 属性。

const image = new Image()
image.onload = () => console.log('loaded')
image.sizes = '(min-width: 36em) 33.3vw, 100vw' 

// This will trigger the browser to start loading the appropriate picture
image.srcset = `
  large.jpg 1024w,
  medium.jpg 640w,
  small.jpg 320w
`