Web Hosting by Netfirms | Free Domain Names by Netfirms

Preloading images

Preloading images is the processes of loading images into memory before they are needed.

The next section gives you a complete example of a fully functional image loading process. The example shows you how to preload an image then show it afterwards in a different window, which means the user does not have to wait for it load. This example only uses one image, but that's all that's needed to demonstrate the point. However the same logic can be applied to many more images. Run Code | View Code

Process

Making the image object - stored in pic
Force the web browser to assign the image object to image data - setting the src property on the image to an existing picture
Ensuring the redirect function is called - Test if the image was previously loaded if so immediately call the redirect function otherwise attach the onLoad event of the image and wait until the browser gets the image data then allow the browser to call the redirect function
Function: preloadImage
Nested Function: redirect

Events

The user pressing the button - onCick event of the button
All data for the image is received - onLoad event of the image

Input

The image - pic

Event Trigger

When the user clicks of the "Prepare web application" button the preloadImage function is called which first makes an image object, sets it's src property to an existing picture then finally decides wether or not to attach the images onLoad event depending on the image's complete property. No matter what the situation the redirect function is called that redirects the user to a web page that has the preloaded image defined in it's body.

The Solution

Set up the button

Make the button and make it call the preloadImage function when the user clicks on it. This allows the user to start the process. <input type="button" value="Prepare web application" onClick="preloadImage">

Define preloadImage

Function analyses

The preload image function's purpose is to preload one image that resides on a different web page. As soon as the image is loaded the redirect function is called which sends the user to the web page that holds the image that was preloaded. That web page will show the image immediately because all image data was already downloaded to the client. The benefit of doing this is that the user does not have to wait for the image to display.

This function first declares a single but important local variable pic. This variable is then initialized with the built in Image object. Straight afterwards it's src property is set to an existing file location that points to a real image.

After initial setup the code then checks if the image was previously loaded or not by querying the complete property. If the complete property returns true it means the image is already in the user's machine. If it's false it means the image is not on the client's machine.

If the image is on the client's machine there is no need to download the image again and even if it was loaded with JavaScript it would fail since the web browser will not call the image's onLoad event. Therefore the nested redirect function is called straight away.

However if the image is not on the client's machine the onLoad event of the image is registered and forced to call the redirect function. The redirect function is called as soon as the image is loaded.

If the image does not exist the onLoad event will never be called as a circumstance the redirect function will never get called either. That's why it is important to manually verify that the image does exist before tempting to preload an image in this fashion.

Comments with code

function preloadImage(){

Holds the image object var pic Create an image object var pic = new Image() Set the image object's src property to an existing image pic.src = "images/pl1.jpg" Has this image been previously loaded? if(pic.complete){

Call the redirect function immediately since the image was loaded before redirect()

The image has changed or it was never loaded }else{

Make the onLoad event of the image call the redirect function as soon as all image data for the image is received pic.onload = redirect

} Define the redirect function function redirect(){

Change the URL of the current window to a new file.
This file contains an image tag that holds the loaded image window.location="image_preload_win.htm"

}

Importent

Image onload event and the complete property
In Internet explorer 4 and Netscape 6 and higher the "onload" event will not be called by the image if the image was previously loaded so the image's "complete" property must be verified if it's loaded or not. The complete property returns "true" if it was loaded before otherwise it returns "false". Netscape 4.5 and lower does not understand the "complete" property but the "onload" event is called wether or not the image was previously loaded.
Ensure the image exists
When creating an image object and setting it's "src" property is MUST point to a real image that exists! (That's if you want an image loader function to function properly) If it does not exist the image's "onload" event will never be called and the "complete" property will never be "true". Therefore any image loader function will never know if the picture is ready or not. So if there is a problem with the loading procedure it's most likely because the supplied file location cannot be found.
Internet Explorer Bug
In Internet explorer there is a Bug. If an alert statement is placed just before the image's onload event function register the event will never be called by the image. To avoid this bug never structure you code in the following manner:
alert("here") image.onload = functionHandler
Other ways of loading images
The best way to preload an image is to create an image object so the image can expose you to the "onload" event and "complete" property. However in same situations it is not necessary to know when an image is loaded, all that's wanted is a loaded image. To perform this one can load an image into a hidden frame , IFRAME or layer.
When to preload images
1. When an image tag in the document is dynamically added after the document is loaded.
2. When an image tag' "src" property is set to a different image file, this will happen if you creating a rollover.
3. When the user is likely to click on a hyperlink that holds an image that the web author does not want you to wait for.
4. When a new window is made which contains images that should be displayed straight away.
User Perception
The main purpose for preloading images is to increase user satisfaction by speeding up download times and making it seam as though the user didn't wait for the image to load. It also makes the web application look more professional and reliable because it's interface is fully painted as soon as the user invokes the application. The strategy is to alter the user's perception so he or she believes the web application is up to standard and running at it's fullest potential.

Run Code | View Code

JavaScript Tutorial Home