by Dori Smith
October 5, 2000
And then I just read
Create the object — called an array — that collects the images and places them in a specific order.
Actually, her array doesn’t collect any images. It just collects image names. I may have just typed the name “Bill Gates” into this article, but that didn’t make him suddenly appear in front of me. A name of a thing isn’t the thing itself.
One of the reasons why her resulting animation is so slow is that it forces the script to download every image every time you want to display it on the screen. If the script actually did what she describes above, it’d work much better.
danceSeries = new Array('dance00.jpg', 'dance01.jpg', 'dance02.jpg', 'dance03.jpg');
Translated into English this bit of code would read, “Create a new array, called danceSeries, and include the following images in the array.” Also note that we have surrounded the filenames with parenthesis, and separated each name with a comma.
One of the major advantages of creating an image array is that it forces all of the images to be cached. This means that they will be downloaded immediately, and available for the animation to play back smoothly.
Bzzt. The array above is just little strings: pieces of text. Nope, no caching is done. And if you’re going to give your images non-meaningful names like these, you don’t even need an array– you could just calculate the names on the fly.
The function “document.images” handles this for us.
The object document.images isn’t a function. It’s, well, an object. A function is something else entirely. Another correct way to describe this is to refer to the images property of the document object.
document.images['dance'].src = danceSeries[theCount];
This is a much more complex way of writing this than is necessary. Instead, it’s better to just say
document.dance.src = danceSeries[theCount]
document.dance.src = "dance0"+theCount+".jpg"
because then, as described above, you don’t need the array at all.
The end result: As the script is executed, one frame of the animation will be displayed, there will be a 300 millesecond pause, and then the next frame of the animation will be displayed.
Actually, no. When the script is executed, one frame of the animation will start to be downloaded. It’ll display at some later point.
Not true. It’ll run just fine, it’ll just be based on the size of the image that you’ve put in the image tag. Image sizes should be given because it makes the page render more quickly (and because it’s the standard, but that’s that other issue again).
Here’s how to do it correctly:
And here’s where you can see it in action.
By the way, no, I didn’t go through this with a fine tooth comb. There may well be more problems with the article and the code than are listed above; these are just the ones I found most glaring.