JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div id="results"></div>

CSS

#results {font-family: "Courier New"; margin: 10px;}

JavaScript

var urls = [
    "http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg",
    "http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg",
    "http://photos.smugmug.com/photos/344290698_AaG2k-Ti.jpg",
    "http://photos.smugmug.com/photos/344290767_2hvcN-Ti.jpg",
    "http://photos.smugmug.com/photos/344291168_nErcq-Ti.jpg",
    "http://photos.smugmug.com/photos/344292250_Mpaju-Ti.jpg",
    "http://photos.smugmug.com/photos/344291991_Ljpo5-Ti.jpg"
];

var imgs = [];
var imgsRemaining = urls.length;

function imageLoaded() {
    --imgsRemaining;
    var fname = this.src.substring(this.src.lastIndexOf("/") + 1);
    $("#results").append(imgsRemaining + " &nbsp;&nbsp;&nbsp;" + fname + " (" + this.index + ")<br>");
}

var img;
for (var i = 0; i < urls.length; i++) {
    img = new Image();
    img.onload = imageLoaded;
    img.src = urls[i];
    img.index = i;
    imgs.push(img);
}