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

【问题标题】：How to preload images with multiple srcset with javascript or jQuery?如何使用 javascript 或 jQuery 预加载具有多个 srcset 的图像？
【发布时间】：2016-06-03 01:18:50
【问题描述】：

我正在尝试为我正在开发的一个小型应用程序构建一个脚本来使用 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 中再次加载它们呢？我可能完全错了，也许我错过了一些东西。正确的做法是什么？

【问题讨论】：

标签： javascript image caching preload

【解决方案1】：

您不能在 Javascript 中检测浏览器宽度，并使用它来加载正确的图像吗？您可以为小图像设置一个数组，为中图像设置一个数组，为大图像设置一个数组。

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

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

【讨论】：

【解决方案2】：

您可以使用您在脚本中的相同想法，但改为设置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
`

【讨论】：