JavaScript Image Rotation Firefox Issue

Question

I am trying to implement simple image rotation in JavaScript. With a 500 ms delay, it works as I expect in IE but in Firefox, only the last image in the sequence is displayed in the browser. Firebug shows the Http load status as "Aborted" on all but the last image in the sequence. If I increase the delay to 2000 ms, it seems to work in Firefox but nothing less than that.

How do I get around this issue in Firefox regardless of the delay used to rotate the images?

Here's my code:

    var camera = new Object;
    camera.dir = "./images/";
    camera.images=["102.jpg","102-2.jpg","102-3.jpg","102-4.jpg","102-5.jpg"];

    var imageCounter = 0;
    var timerRotator;

    window.onload = function() 
    {
        initialize();  
    };   

    function initialize()
    {
        RotateImages();
    }

    function RotateImages()
    {
        if (imageCounter >= camera.images.length)
        {
            return;
        }   

        document.imgCamera.src = camera.dir + camera.images[imageCounter];
        imageCounter++;
        timerRotator = setTimeout("RotateImages()",500);
    }

Usually when errors crop up like this in Firefox, it's me doing something incorrectly.

Answer 1

Have you tried preloading the image at startup? Might solve the issue.

Do a foreach in initialise and create an Image object for each picture:

pic[i] = new Image();
...

That way a delay in the images loading won't crash the script.

Answer 2

Don't want to do it in css?

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Answer 3

[See it in action]

This works fine across all browsers.

var camera = new Object;
camera.dir = ""; // don't needed for the example
camera.images= ["http://i3.ytimg.com/vi/vMQTbz1oB2E/default.jpg",
                "http://i4.ytimg.com/vi/sxzc1RbcrVs/default.jpg",
                "http://i2.ytimg.com/vi/5z1fSpZNXhU/default.jpg",
                "http://i3.ytimg.com/vi/B7UmUX68KtE/default.jpg"];

var imageCounter = 1;
var timerRotator;

// you can do this short if this is
// the only thing you do after onload
window.onload = RotateImages;

function RotateImages() {
    // restart rotation
    if (imageCounter >= camera.images.length) {
        imageCounter = 0;
    }

    // the standard way to grab an element by its id
    var img = document.getElementById("imgCamera");

    // change the src and increment counter
    img.src = camera.dir + camera.images[imageCounter];
    imageCounter++;

    // RotateImages function can be passed by reference
    timerRotator = setTimeout(RotateImages, 500);
}​

HTML

<img src="/firstpic.jpg" id="imgCamera" alt="" /> 

The problem was probably how you tried to select the image element in the DOM. It wasn't a standard way. document.getElementById is the standard method for that. Or if you want to get all images there is a document.getElementsByTagName function too.