JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.githubusercontent.com/caolan/async/master/lib/async.js"></script>

JavaScript

var response = {
    showcase: [
        {pool_user_pict: 'http://lorempixel.com/g/400/200/', username: 'foo'},
        {pool_user_pict: 'http://lorempixel.com/g/300/200/', username: 'foo'},
        {pool_user_pict: 'http://lorempixel.com/g/200/200/', username: 'foo'},
        {pool_user_pict: 'http://lorempixel.com/g/500/300/', username: 'foo'},
        {pool_user_pict: 'http://lorempixel.com/g/600/800/', username: 'foo'},
        {pool_user_pict: 'http://lorempixel.com/g/800/800/', username: 'foo'},
        {pool_user_pict: 'http://lorempixel.com/g/900/700/', username: 'foo'},
        {pool_user_pict: 'http://lorempixel.com/g/1000/800/', username: 'foo'}
    ], 
    success: true
};

var people = $('<ul />');
if(response.success && response.showcase) {
    async.map(response.showcase, function(item, done) {
        var img = new Image();

        //we now install callbacks to certain events
        img.addEventListener('load', function () {
            done(null, {
                img: img,
                username: item.username
            });
        });

        img.addEventListener('error', function () {
            done(true);
        });

        //this will kick image loading
        img.src = item.pool_user_pict;
    }, function (err, results) {
        if(err) {
            //images weren't loaded correctly, handle this whatever you like
            console.error('Something went wrong');
            return;
        }

        //here you now know that every image you wanted is loaded
        results.forEach(function (data) {
            var li = $('<li />');
            li.append(data.img);
            li.append($('<label />', {
                html: data.username
            }));

            people.append(li);
        });
        $(document.body).append(people);
    });
}