Programmer to Programmer

JavaScript
Programmer's
Reference

PrevHomeUpNext

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

PrevHomeNext
IISUpImage object

JavaScript Programmer's Reference, Cliff Wootton
Wrox Press (www.wrox.com)

Join the Wrox JavaScript forum at p2p.wrox.com
Please report problems to support@wrox.com

© 2001 Wrox Press. All Rights Reserved. Terms and conditions.