Preloading Images

Our menu needs to be displayed quickly. The images it uses must appear instantly. The best way to achieve this is to preload them, i.e. to force the browser to load them into the memory before a specific action demands it.

The method consists of creating new objects through the imageObject function. Our menu uses eight images - eight icons that represent the state of our menu items. So we will need eight calls to the imageObject function (lines 205-215):

205:       folder_closed = new imageObject('folder_closed.gif');
[...]
215:       start_up = new imageObject('start_up.gif');

If you have followed our previous DHTML workshops, you will know that everything is an "object", including images. Thus, one line suffices to create an object of the image type:

43:    this.obj = new Image()

Once the image object has been created, you must initialise it with the name of the file it is associated with. For this, we will assign the filename (contained in the image_URL variable) to the .src property:

45:    this.obj.src = image_url;

The image object is then transmitted to the calling procedure.