JSFiddle - React, Tailwind, and code Playground

by joquery

HTML

<img src="http://placehold.it/150x50"/>
<img src="http://placehold.it/151x50"/>
<img src="http://placehold.it/152x50"/>
<img src="http://placehold.it/153x50"/>
<img src="http://placehold.it/154x50"/>
<img src="http://placehold.it/155x50"/>
<img src="http://placehold.it/156x50"/>
<img src="http://placehold.it/157x50"/>

JavaScript

jQuery(document).ready(function($) {
    
    var images = [];
    
    $("img").each(function(index, item) {
        var $this = $(this);
        var src = $this.attr("src");
        $this.attr("src", "");
        $this.data("src", src);
        images.push($this);
    });
    
    loadRemainingImages(images);
    
});

var allImages;

function loadRemainingImages(images) {
    allImages = images;
    loadNextImage();
}

function loadNextImage() {    
    var nextImg = allImages.shift();
    
    $(nextImg).on("load", imageloaded);
    $(nextImg).attr("src", $(nextImg).data("src"));    
}

function imageloaded(e) {
    if (allImages.length > 0) {
        loadNextImage();
    }
};