JSFiddle - React, Tailwind, and code Playground

HTML

<div class="images">
    <ul class="imageList">
        <li><img src="http://wiki.urbandead.com/images/1/1c/Square.gif" class="pics" /></li>
        <li><img src="http://wiki.urbandead.com/images/1/1c/Square.gif" class="pics" /></li>
        <li><img src="http://wiki.urbandead.com/images/1/1c/Square.gif" class="pics" /></li>
        <li><img src="http://wiki.urbandead.com/images/1/1c/Square.gif" class="pics" /></li>
    </ul>
    <a href="#" id="click">Show Images</a>
</div>

CSS

li { padding: 10px; 
    height: 50px;
    width: 50px;
}
    ul.imageList li .pics { height: 50px; width:50px; border:1px solid black; }


li {
    background: url("http://www.140westfranklin.com/images/global/ajaxLoader.gif") no-repeat scroll 50% 50% #EEEEEE;
}

JavaScript

$('document').ready(function() {
        $('img').hide();//hide all the images on the page
        $('#click').click(function(event) {
            event.preventDefault();
                $('img:hidden').eq(0).fadeIn(100);
        });
    });

var i = 0;
var interval=0;
$(window).bind("load", function() {
    var interval = setInterval("doThis(i)",100);
});

function doThis() {
    var images = $('img').length;
    if (i >= images) {
        clearInterval(interval);
    }
    $('img:hidden').eq(0).fadeIn(100);
    i++;
}