Easiest way for Image Preloading

Image pre-loading is almost an essential task in dynamic website. Its specially needed for Ajax powered website. Suppose, you want to show a loading image while getting contents from server after user clicks any button/link. In this case, if the image is not preloaded, the loading image and server result may come at same time. So what is the benefit of showing the loading image if the user can’t see it while the content is loading?

One may preload images using javascript, which may not easy for novice developer. But I got an easy way. here is the way:

You list the required images to preload in a page. Then make a div and show all images in the div as below:

<div><img src="image1" alt="" />
<img src="image2" alt="" />
<img src="image3" alt="" /></div>

you may add as many images as you need. Aha! You see all images are shown in the website as soon as they are loaded. But we will not show all now but show later. So here is the final code:

<div style="display:none"><img src="image1" alt="" />
<img src="image2" alt="" />
<img src="image3" alt="" /></div>

now whole div and all its contents (the images) are hidden. but these images are loaded to browser cache. so whenever you call any images (listed above) it will be shown immediately after calling rather than waiting to load from server as this images are now in browser’s cache.

thanks