How to preload images with multiple srcset with javascript or jQuery?
<p>I'm trying to build a script to preload images with jQuery, for a small application I'm working on.</p>

<p>I've read different tutorials and right now I managed to have it working like this:</p>

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

<p>This works fine. I load the images from an array I prepare, I then create all the <code>img</code> tags and then append them in the DOM where needed.</p>

<p>I'm wondering now, though, how can I do something similar if I have images with multiple <code>srcset</code>.</p>

<p>Let's say I have 3 sizes for each image, but they could be more, normally I would put something like this in the html:</p>

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

<p>Now, how shall I apply the preloading to this?</p>

<p>1) I could preload all the sizes for each image in Javascript, but this would be pointless, because the whole purpose of having multiple srcset is to load just one
2) I could put the <code>img</code> tag in the DOM, let the browser choose the only size needed and load from Javascript.</p>

<p>The problem with the second option is that the browser is loading the images from the DOM, so why loading them again in Javascript? It's possible that I am completely wrong about this and maybe I'm missing something. What's the correct way to do it?</p>