I wrote the following javascript code to load images async:
const $collection = $('#CollectionSection .grid-uniform'), $images = $collection.find('.grid-product__image'), imagesLen = $images.length; for (var i=0; i<imagesLen; i++){ setTimeout(function() { $images[imagesLen-i].src = $images[imagesLen-i].src.replace('_compact.', '_grande.'); i--; }, 100*(i+1)); } My question is, is this a valid code? Will this help my page load faster (assuming _compact images are really small)?
The short answer would be no. From what I gather you want to load a bunch of images separately by loading one every 100ms.
That means if you have 20 images, you'll spend 2 seconds loading, and if you have 100, you'll spend 10 seconds loading. I bet you that on a decent connection, any browser can beat that.
I would not want to pre-empt the browser on this. Just put them in as regular tags and let the browser do the rest. It is much more adept at loading resources and scheduling the loading of resources. Especially since http/2. If there's a fat pipe you'll be loading that data much faster as well.
If you do want to go this route, only use it as a response to user action. So if the user scrolls through the gallery and reaches a point where there are no more images should you add some more. But without timeouts and any special logic. Just create images or assign srcs to already created DOM elements.
If you're using http/1 you could use something like css sprites to do a single download of a big image, and have each gallery image take its source from that.
