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

现在，我应如何运用预压到这一点？我可以预先加载Javascript中每个图像的所有尺寸，但这是毫无意义的，因为具有多个srcset的整个目的是只加载一个 2）我可以将img标签放在DOM中，让浏览器选择所需的唯一大小并从Javascript加载。

第二个选项的问题是浏览器正在从DOM加载图像，为什么要在Javascript中再次加载它们？这可能是我完全错了，也许我错过了一些东西。什么是正确的方法来做到这一点？

Answer 1

你不能在Javascript中检测浏览器宽度，并使用它来加载正确的图像？你可以有一个小图像阵列，一个用于中型，一个用于大型。

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

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