If you want to animate some images, you will need to cache them locally to make sure the animation moves smoothly. If you don't, the animation will be very jerky while the images are fetched from the server.

The action of setting the src attribute of the image object in the buffer array is simply to recall the images and store them in the cache. The image objects then act as a repository to store the src value so it can be assigned to the target image in an animation loop.

Warnings:

• Note that this technique is a waste of time if you set your browser cache to zero bytes capacity and force a document to be requested from the server every time, at least that is what happens in MSIE (and is what you would expect).

• Netscape adds a trick to this by caching objects that you are holding in memory and referencing via script variables - it's a little smarter, and knows that you are intentionally caching images even though you have set your cache size to zero.

• Some versions of MSIE fetch the image from the server every time you reference it regardless of your cache settings or the fact that you have preloaded it and stored a reference to it in a variable.

Example code:

   <!-- Image cache technique -->

   <SCRIPT>

   // First create an image buffer array

   var myImages = new Array(10);

   // Now load the array with image objects getting them from the server

   for(var myIndex = 0; myIndex<10; myIndex++)

   {

   myImages[myIndex] = new Image();

   myImages[myIndex>].src = "assets/image_" + myIndex + ".jpg";

   }

   </SCRIPT>