Image preloading (Useful tip)

A technique for caching images locally in readiness for an animation.

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.


Example code:

   <!-- Image cache technique -->
   // 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";

See also:Image.src