jQuery: sequential thumbnail loader

by secretgspot

HTML

<div id="thumbs">
<figure>
<img src="https://lh4.googleusercontent.com/-RNK2HnSjeY4/UIAdeV_WleI/AAAAAAAABHM/f0CSm0fdsps/s100/1-thumb.jpg" alt=""/>
    </figure>
    
<figure>
<img src="https://lh6.googleusercontent.com/-NLkErcaCwp4/UIAdebMolxI/AAAAAAAABHM/pf9VZrqJ48E/s134/2-thumb.jpg" alt=""/>
    </figure>
 <figure>
<img src="https://lh5.googleusercontent.com/-_6qQoaCReig/UIAdfpUeyQI/AAAAAAAABHM/v4wxkVQubIM/s100/3-thumb.jpg" alt=""/>
    </figure>
<figure>
<img src="https://lh6.googleusercontent.com/-4S9fasDur8E/UIAdg0l2kmI/AAAAAAAABHM/6JTq7ue1CtU/s151/4-thumb.jpg" alt=""/>
    </figure>
</div>

CSS

#thumbs {
    margin: 2em;
    overflow: hidden;
}

#thumbs figure {
    float: left;
    margin-right: 1em;
}

#thumbs .loader {
    display: none;
}

JavaScript

var preload = function() {

    var i = 0;

    $('figure', '#thumbs').each(function() {
        var $figure = $(this);
        var loader = '<img src="https://lh6.googleusercontent.com/-6bhXHf5v0vQ/T8JahtOdeAI/AAAAAAAABBY/4B8dw7_jL-8/s66/loading.gif" class="loader"/>';
        $figure.append(loader);
    });

    $('img', '#thumbs').not('img.loader').each(function() {
        var $img = $(this);
        var $loader = $img.next();
        $img.hide();

        setTimeout(function() {
            $loader.fadeIn(i / 4, function() {

                $(this).hide();
                $img.fadeIn(200);

            });
        }, i += 800);

    });

};

preload();