JavaScript Image Rotation Firefox Issue

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开发者_如何学Python;
        }   

        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.

---

[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.

---

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.

---

I know I've answered the question just wanted to add how I would refactor your code into one singleton object. It keeps the global namespace clear, and related things encapsulated.

// pack the whole thing into a singleton objecz
var imageRotator = (function() {

  // with private variables only he knows
  var dir = "";
  var 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 img = document.getElementById("imgCamera");
  var counter = 1;
  var timer;

  // and a public interface
  return {
     start: function () {
          // restart rotation
          if (counter >= images.length) {
              counter = 0;
          }

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

          // RotateImages function can be passed by reference
          timer = setTimeout(imageRotator.start, 500);
       },
       stop: function() {
          clearTimeout(timer);
       }
   }; 
})();

Then you could say:

// how cool is that? :)
window.onload = imageRotator.start;​

---

Don't want to do it in css?

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