Image animation (Useful tip)

Using cached images to animate an image.

If you cache some images in local memory, you can perform some very slick animations.

You can effect animation with the lowsrc property in the same way as you can with the src property but the src property must remain empty while you do that. If you specify both and the browser is running in a low resolution device, the lowsrc image will be used instead of the src image.

The example shows you how to do animation with src properties.

Example code:

   <HTML>
   <BODY>
   <!-- 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";
   }
   
   var mySequence = 0;
   function animate()
   {
      mySequence = (mySequence + 1)%10;
      document.images[0].src = myImages[mySequence].src;
   }
   
   setInterval("animate()", 100);
   </SCRIPT>
   
   <IMG SRC="assets/image_0.jpg" NAME="targetimage">
   
   </BODY>
   </HTML>

See also:Image.lowsrc, Image.src