JSFiddle - React, Tailwind, and code Playground

HTML

<img data-src="http://lorempixel.com/400/200/animals/">
<img data-src="http://lorempixel.com/400/300/animals/">
<img data-src="http://lorempixel.com/500/400/animals/">
<img data-src="http://lorempixel.com/400/500/animals/">
<img data-src="http://lorempixel.com/400/600/animals/">

JavaScript

var numImagesLoaded = 0;

var images = $('img[data-src]');

preloadNextImage();

function preloadNextImage() {
    // if we've reched the end of our 'images' array, stop
    if(typeof images[numImagesLoaded] === 'undefined') {
        return;
    }
    // load the image into a jQuery object
    var $image = $(images[numImagesLoaded]);
    // set a listener on the image so that when it's
    // done loading, it will call this function recursively
    $image.on('load', function() {
      // after the image loads, increase the index
      // and then load the next one
      numImagesLoaded++;
      preloadNextImage();
    });
    // set the src on the image to what is in data-src
    $image.attr('src', $image.data('src'));
}