JSFiddle - React, Tailwind, and code Playground
HTML
<img class="preload" id="thephoto1" src="http://desmond.imageshack.us/Himg391/scaled.php?server=391&filename=countdown.gif&res=medium" />
<img class="preload" id="thephoto2" src="http://icanhascheezburger.files.wordpress.com/2010/11/funny-pictures-gif-cat-love.gif" />
<br />
<img class="preload" id="thephoto3" src="http://i52.photobucket.com/albums/g9/cpchick/Random%20Gifs/therock.gif" />
<img class="preload" id="thephoto4"src="http://www.gifsoup.com/view/855907/toasty-o.gif" />
<br />
<img class="preload" id="thephoto5" src="http://www.mobileapples.com/Assets/Content/Screensavers/dc_1owy86mw.gif" />
<img class="preload" id="thephoto6" src="http://www.pptbackgrounds.fsnet.co.uk/images/powerpoint-countdown-u1.GIF" />
CSS
.preload {visibility:hidden;}
JavaScript
var images = ["thephoto1", "thephoto2", "thephoto3", "thephoto4", "thephoto5", "thephoto6"];
function initImages() {
for (var i = 0; i < images.length; i++) {
imageId = images[i];
image = document.getElementById(imageId);
image.style.visibility = "visible";
}
}
function preloadImages(urls) {
var img = new Array();
for (var i = 0; i < urls.length; i++) {
img[img.length] = new Image();
img[img.length - 1].src = urls[i];
}
}
window.onload = function() {
var img = new Array(
"http://desmond.imageshack.us/Himg391/scaled.php?server=391&filename=countdown.gif&res=medium",
"http://icanhascheezburger.files.wordpress.com/2010/11/funny-pictures-gif-cat-love.gif",
"http://i52.photobucket.com/albums/g9/cpchick/Random%20Gifs/therock.gif",
"http://www.gifsoup.com/view/855907/toasty-o.gif",
"http://www.mobileapples.com/Assets/Content/Screensavers/dc_1owy86mw.gif",
"http://www.pptbackgrounds.fsnet.co.uk/images/powerpoint-countdown-u1.GIF"
);
preloadImages(img);
initImages();
}