JavaScript图像旋转问题

我试图用JavaScript实现简单的图像旋转。延迟500毫秒，正如我在IE中预期的那样，但在Firefox中，浏览器中只显示序列中的最后一幅图像。Firebug在序列中除最后一个图像外的所有图像上显示Http加载状态为“中止”。如果我将延迟增加到2000毫秒，它在Firefox中似乎可以正常工作，但仅此而已

我如何在Firefox中避开这个问题，而不考虑旋转图像的延迟

这是我的密码：

    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);
    }

---

通常当Firefox出现这样的错误时，是我做了一些不正确的事情

您是否尝试过在启动时预加载映像？也许可以解决这个问题

在初始化中执行foreach并为每张图片创建图像对象：

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

这样，图像加载延迟不会使脚本崩溃。

不想吗

[] 这适用于所有浏览器

HTML

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

---

问题可能是您如何尝试选择DOM中的图像元素。这不是一种标准的方式。是这方面的标准方法。或者，如果你想获得所有图像，也有一个函数。

我知道我已经回答了这个问题，只是想添加如何将代码重构为一个单一对象。它使全局名称空间保持清晰，并封装相关内容

// 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);
       }
   }; 
})();

然后你可以说：

---

我喜欢你重构它的方式。但是，Firefox仍然无法正确显示我的图像。你的例子是可行的，但在我的例子中，我认为这与我的图像大小有关（它们大约是20kb）。看起来，如果浏览器加载图像的时间比setTimeout中的延迟时间长，则不会显示图像。IE没有表现出这种行为。请检查我另一个答案中的示例。这种方法有效。如果它在IE中对你有效，它应该在FF中有效。

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

// 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);
       }
   }; 
})();

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