JSFiddle - React, Tailwind, and code Playground
by Rodney Golpe
HTML
Images flow in sequentially base on previous image's onload event:
<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) });
}
}
(function loadNextImage(i) {
if (json && json.images && json.images[i]) {
var img = new Image(),
image = json.images[i];
img.onload = function () {
$("<img/>", {
src: image.image_thumbnail_url
}).appendTo("#main");
loadNextImage(++i);
};
img.src = image.image_thumbnail_url;
}
})(0);