Image Swaps and Animation
Changing Stuff On-Screen Without Reloads
With the advent of Netscape 3.0® a new call was supported: new Image();
Complementing this call is the .src specification.
With these new calls, you can initially display an image on screen when it first loads and then change it at will without triggering a Reload of the whole page.
This capability is more powerful than it might at first glance appear.
For example, you can cause an image to be animated without specifying an animated .gif file.
You can include "action" buttons on your pages that "light" or in some other fashion "repond" to a visitor's actions interactively, and then appear to "depress" when the visitor clicks on them.
Indeed, the capability to change images - either via a timing call or a visitor action -- is a first glimpse of what the much-overused term "Multimedia" really means on the World Wide Web.
What you can now do on your pages is only limited by your own creativity.
If you plan to preload images for animation, this is an important call to understand.
variable is an array element or a string variable which you "condition" as an image holding element.
Once it has been thus "conditioned", you can specify a "source" file name for it, using the .src specification.
If, for example, you have a series of .gif files that you wish to swap to create an animation, say ten of them, named "0.gif" through "9.gif" sequentially, you might use the following loop to preload the images:
Then the following routine could be used to create the animation. Note that the setTimeout(); call has been set to 300 milliseconds between changes. Each animation will dictate the time between changes that is appropriate:
Changing Images Without Using the Image(); Call
You are not obliged to use the Image(); call to swap images on screen. In fact, if preloading the images is not a prerequisite for the display, you may find it more practical to simply specify the source for the new image.
Other Ways of Preloading Images
It may be better for the kind of display you are using to preload certain images "manually" -- that is, a few at a time, sequentially, just before they are needed.
You can cause the image to be downloaded to the visitor more or less as straight ASCII and very quickly by more or less disabling the browser graphic rendering engine.
How? By specifying the image (regardless of size) to be displayed in a mini-scaled version just one pixel high by one pixel wide.
Because it does not have to "think" about it, the image is cached on the visitor's computer, but is almost invisible on screen.
Then, when you swap that image later, since it is already in cache, the redisplay of this .gif or .jpg file "full size" can be accomplished at the local computer speeds, rather than having to first fetch it from the server and download it at modem and internet packet transfer speeds.
There is one more reason that such one pixel by one pixel preloads are necessitated.
There is a "bug" at present that displays "transparent" .gifs the first time to screen as non-transparent.
If you are creating so-called "overlays" of images on top of previously displayed images, you'll be obliged to preload them so that your display isn't hidden by subsequent images.
Then, when you click the "Next Page" button, they are "popped" to screen because they are displayed from cache.
OK. Now for a couple scripts you can play with to see how it all works. First, a simple animation:
Now, for a slightly more complicated script that gives the user more control than just a start and stop.
This script should be useful, as well, for giving you a feel for delays to use when creating your own animations.