Image Preload With Javascript

http://stackoverflow.com/questions/13317719/how-to-improve-performance-of-map-that-loads-new-overlay-images

HTML

<div class="randomPic"> Mouse over to get the map.  Each hover event will change what country you see.  None of these images will be delivered over the network, because they are already preloaded in the browser. </div>
<div class="thePic"> </div>

JavaScript

var preloadedImages = [];

function preloadImages() {
    for (var idx = 0; idx < arguments.length; idx++) {
        var oneImage = new Image()
        oneImage.src = arguments[idx];
        preloadedImages.push(oneImage);
    }

}

preloadImages('http://cdn.motoquest.com/assets/wmap/a-guided-tours-map-alaska.png', 'http://cdn.motoquest.com/assets/wmap/a-guided-tours-map-canada.png', 'http://cdn.motoquest.com/assets/wmap/a-guided-tours-map-usa.png'
// and all the rest of them
);

// Now all of those images exist in the browser.  DOM changes, HTML changes,
// map references, etc. will all result in the relevant images being pulled from the 
// cache instead of over the network.
$('.randomPic').hover(function() {
    var idx = Math.floor(Math.random() * preloadedImages.length);
    // we're using the Img object, but inserting a new <img> tag with the right URL would
    // be just as effective.
    $(".thePic").html(preloadedImages[idx]); 
}, function() {
    $('.thePic').html('');
});