If you often display the same image on the same page then use image cache to speed up your web pages:
First declare an array variable in javascript global scope to store images with:
var image_cache = new Array(); // declare this in top level window to keep it also when iframes are reloaded
Then declare this onload handler that will display images once page is loaded
// on body onload
function onload_handler() {
image_caching();
// .... more things to do in onload handler ....
}
document.body.onload = onload_handler;
// Display all images with data-src as location for image
function image_caching() {
var images = document.getElementsByTagName('IMG'),
key;
// IMAGE PRELOADING AND IMAGE CACHING
for(key = 0; key < images.length; key++) {
var src = images[key].getAttribute('data-src');
if (!src) continue;
// store in cache
if (!image_cache[src] || image_cache[src].src != src) {
image_cache[src] = new Image();
image_cache[src].src = src;
}
// display from cache
if (images[key].src != image_cache[src].src) images[key].src = image_cache[src].src; // No double load
}
}
Example:
<img data-src=""/images/flower.png" />
<img data-src="/images/car.png" />
<img data-src="/images/car2.png" />