JSFiddle - React, Tailwind, and code Playground
JavaScript
// jQuery.imageload.shared.list contains an array of oversized images url
imglist = Array();
imglist.push('http://www.whodah.com/Misc/earth-map-huge.jpg');
imglist.push('http://www.geobabble.org/~hnw/neon/withindomainrep/neon2.clustdist2.huge.png');
imglist.push('http://chamorrobible.org/images/photos/gpw-20051129-UnitedStatesAirForce-080510-F-0986R-005-bombers-fly-in-formation-B-52-Stratofortress-B-2-Spirit-Shreveport-Louisiana-20080510-huge.jpg');
imglist.push('http://photojournal.jpl.nasa.gov/jpeg/PIA08813.jpg');
imglist.push('http://www.geobabble.org/~hnw/neon/tests3/neon2.10.huge.png');
jQuery.each(imglist, function(i, imgsrc) {
name = 'imageload-frame';
id = name + "-" + i;
// with img it is not possible to suspend, the get is performed even after remove
//var loader = jQuery('<img />').attr('name', name).attr('id',id);
var loader = jQuery('<iframe />').attr('name', name).attr('id', id);
//no cache on GET query taken from jQuery core
// as we really want to download each image for these tests
var ts = +new Date;
// try replacing _= if it is there
var ret = imgsrc.replace(/(\?|&)_=.*?(&|$)/, "$1_=" + ts + "$2");
// if nothing was replaced, add timestamp to the end
imgsrc = imgsrc + ((ret == imgsrc) ? (imgsrc.match(/\?/) ? "&" : "?") + "_=" + ts : "");
loader.css('width', 50).css('height', 50).appendTo('body');
loader.after(jQuery('<a>').text(' stop ').attr('href', '#').click(function() {
loader.remove();
jQuery(this).text(' suspended ');
}));
// start the load - preload
loader.attr('src', imgsrc);
// when preload is done we provide a way to get img in document
loader.load(function() {
jQuery(this).next("a:first").remove();
var finalimg = jQuery('<img />');
// browser cache should help us now
// but there's maybe a way to get it direclty from the iframe
finalimg.attr('src', loader[0].src);
finalimg.css('width', 50);
...