Most of the time images on your page take extra seconds to download from web server. Again if you want to load some images on some user action, you most likely want the fast image load i.e. instant with the user clicks..
Or in case you want to create an image gallery viewer by clicking ‘Next’ / ‘Previous’, you usually don’t want waiting your user for some extra seconds for each image loading.
JavaScript helps you to load images into the browser’s memory cache without displaying them.This technique is the hilarious precaching images
. And this technique preload the images into the browser cache when the page initially loads.
In order to precache an image we need to construct an image object in memory. Image object created in memory is dissimilar from the document image object aka <IMG>tag.
Here we go
var myImage = new Image(width, height)
Parameters to the constructor are the pixel width and height of the image we want to precache.
So the image object exists in memory. Now you can assign a filename or URL to the src property of that image object:
myImage.src = “someImage.jpeg”
Such above statement assigning image src
loads the image into the browser image cache.
Now you can use this cached image wherever you like instantly.
You may assign this precached image src
property to the actual document image tag src
property.
document.images[0].src = myImage.src
Here is the detail example:
<html> <head> <title>Image viewer</title> <script type="text/javascript"> //precache four images image1 = new Image(480, 320) image1.src = "1.jpg" image2 = new Image(480, 320) image2.src = "2.jpg" image3 = new Image(480, 320) image3.src = "3.jpg" image4 = new Image(480, 320) image4.src = "4.jpg" //loads an image from cache function loadFromCache(img){ document.imagePlaceHolder.src = eval(img + '.src') } </script> </head> <body> <div align="center"> <img name="imagePlaceHolder" src="1.jpg"> <br> <a href="#" onClick="loadFromCache('image1')">Image1</a> <a href="#" onClick="loadFromCache('image2')">Image2</a> <a href="#" onClick="loadFromCache('image3')">Image3</a> <a href="#" onClick="loadFromCache('image4')">Image4</a> </div> </body> </html>
In the above example four images are precahced into browser memory and used in the page <IMG> tag
src
property oncilck on the four links instantly updates the document <IMG> tag src
. Try the example and feel the difference in image loading. 🙂
Download this example code with some sample images
Tadddaaaa!
Nice and Useful Article. thanks for posting. 🙂
LikeLike
HI, thank you for the tips. Is there a way for precaching images in css?
LikeLike
I respect your work and added blog to favorites.
LikeLike