JSFiddle - React, Tailwind, and code Playground

by Rajshekar Reddy

HTML

<div>
<img />
<img />
<img />
<img />
</div>
<div id="output">
  
</div>

JavaScript

var loaded = 0;
var imgSrcArray = ["https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Small_icosihemidodecahedron.png/100px-Small_icosihemidodecahedron.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Small_cubicuboctahedron.png/100px-Small_cubicuboctahedron.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Small_dodecahemidodecahedron.png/100px-Small_dodecahemidodecahedron.png",
"https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Small_rhombicuboctahedron.png/100px-Small_rhombicuboctahedron.png"];


$('div img').on('load',function(){
 loaded++;
 var indexOfThisImg = imgSrcArray.indexOf($(this).attr('src'));
 $('#output').append("loaded image " +indexOfThisImg + '<br/>');
 loadNextImg(loaded);
});

function loadNextImg(index){
   $('div img:eq('+index+')').attr('src',imgSrcArray[index]); 
}

$('div img:eq(0)').attr('src',imgSrcArray[0]);