Question

我正在尝试在JavaScript中实现简单的图像旋转。延迟500毫秒，它可以像我在IE中预期的那样工作，但在Firefox中，只有序列中的最后一个图像显示在浏览器中。 Firebug在序列中的最后一个图像上显示Http加载状态为“Aborted”。如果我将延迟增加到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中出现错误时，这是我做错了事。

Answer 1

[See it in action]

这适用于所有浏览器。

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="" />

问题可能是您尝试选择 DOM中的图像元素的方式。 不是标准方式。 document.getElementById是标准方法。或者，如果您想要获取所有图像，也有document.getElementsByTagName功能。

Answer 2

您是否尝试在启动时预加载图像？可能会解决问题。

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

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

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

Answer 3

我知道我已经回答了一个问题，只想添加我将你的代码重构到一个单例对象中。它使全局命名空间保持清晰，并将相关内容封装。

// 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;

Answer 4

不想do it in css？

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

JavaScript Image Rotation Firefox问题

4 个答案:

[See it in action]