如何使用 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

你不能检测 Javascript 中的浏览器宽度，并使用它来加载正确的图像吗？您可以使用一组用于小图像、一组用于中图像、一组用于大图像。

更好的是，如果您以大小为后缀的方式命名图像（image1_small.png 和 image1_large.png），则只需要一个数组，并且只需附加正确的后缀即可。

或者，保留单独的目录，小/大/等，并根据窗口宽度给出正确的路径。