JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<a href="#" id="showMore">Load More</a>

CSS

* {
    margin:0px;
    padding:0px;
}
img {
    vertical-align: top; /* Removes strange space between images...
    http://stackoverflow.com/questions/1383048/html-css-weird-invisible-margin-below-pictures */
}

#showMore {
    position:fixed;
    top:0px;
    left:0px;
    background:white;
    padding:10px;
    color:black;
    text-decoration:none;
}

JavaScript

var users,
    chunkSize = 100,  // number of usernames to load at once
    currentOffset = 0,
    hasStopped = false;

function loadImage(userNumber) {
    $.ajax({
        url: "https://scratch.mit.edu/site-api/users/all/" + users[userNumber].username,
        beforeSend: function( xhr ) {
            xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
        }
    })
    .done(function( data ) {
        var imgUrl = JSON.parse(data).thumbnail_url;
        
        var img = $('<img class="userIcon">');
        img.attr('src', imgUrl);
        img.attr('width', "90px");
        img.attr('height', "90px");
        img.attr('title', users[userNumber].username + " (" + String(userNumber + currentOffset + 1) + ")"); // Tooltip
        img.appendTo('body');
        
        if (userNumber + 1 < users.length) {
            loadImage(userNumber + 1);
        } else if (userNumber + 1 == users.length) {
            hasStopped = true;
        }
    })
    .error(function(){
        // Ignore any errors and just move on
        if (userNumber + 1 < users.length) {
            loadImage(userNumber + 1);
        } else if (userNumber + 1 == users.length) {
            hasStopped = true;
        }
    });
}

function loadUserList(toLoad, offset) {
    $.ajax({
        url: "https://scratch.mit.edu/api/v1/user/?format=json&offset=" + offset + "&limit=" + toLoad,
        beforeSend: function( xhr ) {
            xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
        }
    })
    .done(function( data ) {
        
        users = JSON.parse(data).objects;
        loadImage(0);
        
    });
}

$("#showMore").click(function(event) {
    event.preventDefault(); // Don't jump to top of page
    if (hasStopped) {
       hasStopped = false;
       currentOffset += chunkSize;
       loadUserList(chunkSize, currentOffset);
    }
});

loadUserList(chunkSize, currentOffset);