JSFiddle - React, Tailwind, and code Playground

by air_hadoken

HTML

<body>
Demonstrating loading in sequence.
    
</body>

JavaScript

$(function($) {

var image_urls = [
    "http://wellmanspub.com/wp-content/uploads/2013/01/Puppies.jpg"
    , "http://images2.fanpop.com/image/photos/13700000/cute-puppy-puppies-13789224-1024-768.jpg"
    , "http://www.chickensoupforthepetloverssoul.com/assets/images/headers/puppies-1.jpg"
    , "http://mindjunks.com/wp-content/uploads/2012/11/british_bulldog_2.jpg"
    ];

    (function do_next_load(index) {
        if(index < image_urls.length) {
            var $span = $("<span>Waiting 1 second...</span>")
                        .appendTo(document.body);
            setTimeout(function() {
                $("<img>")
                .attr("src", image_urls[index])
                .attr("height", 400)
                .attr("width", 600)
                .replaceAll($span)
                .load(function() { do_next_load(index + 1)}); 
            }, 1000);
        }
    })(0);

});