JSFiddle - React, Tailwind, and code Playground
JavaScript
var imgArr = ['http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834', 'http://upload.wikimedia.org/wikipedia/commons/thumb/5/54/MA_Route_2.svg/600px-MA_Route_2.svg.png', 'http://foo.com/foo_873.jpg','http://3.bp.blogspot.com/-Q_owQUxNjdQ/Te3ALCmT3oI/AAAAAAAAAnk/wv9r0b0MT-g/s1600/600px-MA_Route_3.svg_.jpg'];
function loadImages(arr) {
if (arr.length === 0) {
return;
}
function imageLoaded(img) {
$(img).hide().appendTo('body').fadeIn();
}
function loadImage() {
var url = arr.shift(),
img = new Image(),
timer;
img.src = url;
if (img.complete || img.readyState === 4) {
imageLoaded(img);
if (arr.length !== 0) {
loadImage();
}
}
else {
// handle 404 using setTimeout set at 10 seconds, adjust as needed
timer = setTimeout(function() {
if (arr.length !== 0) {
loadImage();
}
$(img).unbind("error load onreadystate");
}, 10000);
$(img).bind("error load onreadystatechange", function(e) {
clearTimeout(timer);
if (e.type !== "error") {
imageLoaded(img);
}
if (arr.length !== 0) {
loadImage();
}
});
}
}
loadImage();
}
loadImages(imgArr);