Question

我在IE7，FF，Chrome，Safari中测试代码，此问题仅在Firefox中出现。

我已经检查过问题只发生在FF 3.5.x中，而不是FF 3.0.x.

我想制作一张总共有10张图像的图像动画。

目前，我使用以下代码来执行此操作：

for (var i=1;i<=10;i++){
    img[i] = new Image();
    img[i].src = "images/survey/share_f"+i+".jpg"
}

var cornerno = 0;
function imganimate(){
     $("#surveyicon").attr("src",img[cornerno].src);
     //some logic to change the cornerno
     setTimeout("imganimate()",1000);
}

然后更改元素的src以循环遍历数组“img”。

然而，firefox不断请求图像连续（我希望它只能请求每个唯一的图像一次）。

我该怎么办？

Answer 1

您已经创建了10个DOM节点，设置了他们的src并加载了图像。为什么要再次设置src？您想现在将这十个节点旋转进出。您可以切换style.display或删除并插入节点。

这是我的建议。我不熟悉JQuery，所以我可能会忽略一些额外的快捷方式：

var imgAmt = 10;
img = [];
for (var i=1;i<=imgAmt;i++){
    img[i] = document.createElement("img");
    img[i].src = "images/survey/share_f"+i+".jpg"
    img[i].style.display = "none";
    $("#surveyicon").appendChild(img[i]);
}
imganimate();

var cornerno = 0;
function imganimate(){
    cornerno++;
    cornerno = cornerno > imgAmt ? 1 : cornerno;
    for (var i=1;i<=imgAmt;i++){
        // hide all images but the index that matches cornerno:
        img[i].style.display = i==cornerno ? "" : "none";
    }
    setTimeout(imganimate,1000);
}

Answer 2

img未定义。只需添加一行“var img = new Array（）;”在“for（var i = 1; i＆lt; = 10; i ++）{”

之前

var img = new Array();

for (var i=1;i<=10;i++){
    img[i] = new Image();
    img[i].src = "images/survey/share_f"+i+".jpg";

}

var cornerno = 0;
function imganimate(){
    cornerno %= 10;
    cornerno++;
     $("#surveyicon").attr("src",img[cornerno].src);

     setTimeout("imganimate()",1000);
}

imganimate();

Answer 3

尝试将图像组合成单个图像文件（如精灵图），然后使用CSS定位将图像作为背景图像移动。它会更快，并避免任何重新加载。

Answer 4

这似乎是FF3.5.x中的一个错误。不确定该bug是否已经修复。

图像动画不断请求图像

4 个答案: