The Dangers & Pitfalls of JavaScript Animation

OK, so no one has ever died from a poorly coded JavaScript animation scripts, but from my personal experience (and from the experience of my corporate students) I know the frustrations of scripting these things.

Here are a few tips that can make your life easier.

Always use <IMG> size attributes

The most important thing to remember is that you MUST ALWAYS ALWAYS ALWAYS ALWAYS use he width and size attributes anytime you have both JavaScript and an image in the same HTML document (shown below).         <IMG SRC="image.gif" WIDTH="100" HEIGHT="150"> This is true if you are using JavaScript to animate the image or not! Failure to take this precaution may result in random JavaScript errors with some browsers.

My advice:

It's always a good idea to use these attributes any way because your page will render faster when the attributes are used.

Remember that browsers were designed for surfing, not page development

One of the most frustrating experiences a web developer can have is to make a change and not see the change updated when the page is reloaded on the browser. In many cases the change was made correctly, it just isn't rendered by the browser. The problem is caused bu the way the browser saves and reuses information. All developers should know that hitting the 'reload' button does not always load new information.  It usually just loads the information from memory (cache).  To defeat the browser's caching system (sometimes) press the 'shift' key when clicking on the browser's 'reload' button.  This doesn't always work.

My advice:

If you're sure you made a change that's not properly rendered by the browser, restart the browser.

Make sure the original and replacement images are the same size

It's important to remember that all unique Image objects are restricted to a single width and a single height.  This means that when one image source is replaced by another image source it will have the same dimensions as the original Image object. Sometimes this can have desired effects, but not usually.

My advice:

Always know (write down) the dimensions of all images you use.

Don't mix GIF89a images and JavaScript animation

Don't use JavaScript to manipulate an animated GIF (GIF89a) file. They cause problems.

My advice:

Use animated GIFs when you want to attract a viewer's attention to something specific.

Use JavaScript animation when you want to encourage viewer interaction.

Cache your replacement images before using them

To avoid amateur looking web pages, always cache images before manipulating them with JavaScript.  Caching allows images to load from memory instead of loading from the much slower network.  The speed at which images are made available is important because you want as little delay as possible when JavaScript attempts to exchange one image with another.

My advice:

Review and use the information in the cache lesson.

Fail gracefully when your web page is viewed with older browsers

It is vitally important that you don't try to manipulate images with JavaScript when the viewer is using an older browser. nbsp;You need to consider what will happen to the value of your page if the viewer is using a browser that either, doesn't support JavaScript, or doesn't support the JavaScript Image object.   You learned how to do this in the lesson about browser compatibility but what hasn't been discussed is whether it's wise to do mission critical tasks with JavaScript animation.

My advice (for using any new or nonstandard web technology):

Don't use JavaScript for any mission critical task unless an easy to use alternate path exists for viewers with browsers that aren't JavaScript aware.

Use explicit labels

One of the things you'll experience when you start writing scripts is that the scritps can get confusing.  As a developer, you're responsible for names for things that are very similar.  Even in a simple animation, where one image is replaced by another, you have to name the original image source, the replacement image source, and the name for the image object.

My advice:

Make your labels as specific as possible.

Keep your naming conventions consistent.

Strive for easy to read code--keep labels short.

Thanks, Michael Schrenk

[Previous Lesson]    [Tutorial Home Page]