JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg">
<div id="result"></div>

CSS

#result {font-family: "Courier New";}

JavaScript

var urls = [
    "http://photos.smugmug.com/photos/344292111_SvSfK-Ti.jpg",
    "http://photos.smugmug.com/photos/344291168_nErcq-Ti.jpg",
    "http://photos.smugmug.com/photos/344290550_mae5t-Ti.jpg"
];

function getUnique() {
    var d = new Date();
    return(d.getTime());
}

var cntr = -1;
function getNextURL() {
    var url;
    ++cntr;
    if (cntr >= urls.length) {
        cntr = 0;
    }
    url = urls[cntr];
    if (cntr != 0) {
        url += "?random=" + getUnique();  // force reload except on first image
    }
    return(url);
}



$("img").click(function() {
    $("img").one("load", function() {
        $("#result").append("Image loaded.<br>");
    }).attr("src", getNextURL());
});