JSFiddle - React, Tailwind, and code Playground

by sinju

HTML

<img id="image_loader" style="display:none;" />
<div id="image_container" style="width:100px; height:200px;"></div>

JavaScript

var urls = [];
urls[0] = "http://cdn1.iconfinder.com/data/icons/musthave/16/Stock%20Index%20Down.png";
urls[1] = "http://cdn1.iconfinder.com/data/icons/musthave/48/Stock%20Index%20Down.png";
urls[2] = "http://cdn1.iconfinder.com/data/icons/musthave/256/Stock%20Index%20Down.png";

var hdnPosition = 0;

$(function() {
    $("#image_loader").attr("src", urls[hdnPosition]);
    $("#image_loader").load(function() {
        if (hdnPosition < urls.length) {
            //Uncomment the code below to see the update in action
            alert('image update');
            $("#image_container").css("background-image", 'url(' + $("#image_loader").attr("src") + ')');
            hdnPosition ++;
            $("#image_loader").attr("src", urls[hdnPosition]);
        }
    });
});