Image Preloading is a technique, often used in navigation graphics and image rollovers, to load images and put them in the browser's cache before they are needed. In this post, we will focus on the Javascript technique to implement image preloading. Also, check another Javascript image preloading technique on Image Preloading with jQuery

The Javascript Image() Object

The simplest way to preload an image is to instantiate a new Image() object in Javascript and pass the URL of the image you want to preload.

For example, if you want to preload an image, simply create a new javascript Image() object and place the script in the head section of the page to ensure it runs as soon as the page loads.

<script type="text/javascript">
     Image= new Image()
     Image.src = "pic1.jpg"
</script>

PreLoading Multiple Images with Javascript Arrays

In practice, you will need to preload more than just one image to smooth effect on image rollovers. A Javascript array of images can be preloaded as:

<script type="text/javascript">
     images = new Array();
     images[0]="pic1.jpg"
     images[1]="pic2.jpg"
     images[2]="pic3.jpg"
     // start preloading
     for(i=0; i<=2; i++) 
     {
          imageObj.src=images[i];
     }
</script>

The JavaScript image preloading code may be placed anywhere in the HTML source code. If placed in the HEAD section, images would be loaded before any of the page content is displayed. Also consider checking another image pre-loading technique with CSS at  Preloading Images Using CSS

Related posts

Image Preloading Deeply - CSS/Javascript/jQuery

Browsers load images after an HTTP request is sent for them either by tag or through a javascript call. If you have a javascript function that changes an image on mouseover, you have to wait while the image is retrieved from the server. This would be disturbing when users have a slow internet ...

How to: Image Preload: Javascript (jQuery) or CSS – Comparing the techniques

For better display and visitor interaction, image preloading must be implemented in some cases. Previously we focused on two techniques to achieve image preloading in the following posts:Image Preloading with Javascript,Preloading Images Using CSS. Th's article compares these two methods to underst...

Preloading Images Using CSS

Preloading images decreases page load time and enhance user experience. In the previous articles: Image Preloading with Javascript and Image Preloading with jQuery, we focused on techniques to preload images using Javascript.This post focuses on another image preload technique using CSS.

Comments

Add comment