JSFiddle - React, Tailwind, and code Playground
by Rodney Golpe
HTML
Images flow in non-sequentially (i.e., whenever they are loaded) using setTimeout({},0) because multiple requests are being made simultaneously.
<div id=main></div>
JavaScript
var json = { images: [] },
imgStub = "http://lorempixel.com/";
for (var i = 0; i < 20; i++) {
for (var j = 0; j < 10; j++) {
json.images.push({ image_thumbnail_url: imgStub + (i + 10) + "/" + (j + 10) });
}
}
for (var i = 0; i < json.images.length; i++){
appendImage(json.images[i].image_thumbnail_url)
};
function appendImage(image_thumbnail_url) {
setTimeout(function() {
$("#main").append("<img class='thumbnail' src='" + image_thumbnail_url + "'/>");
}, 0);
}