图像动画不断请求图像答案

【问题标题】：Image animation keeps requesting the images图像动画不断请求图像
【发布时间】：2010-01-08 17:48:50
【问题描述】：

我在 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 不断请求图像连续（我希望它只请求每个唯一图像一次）。

我该怎么办？

【问题讨论】：

连续是什么意思？它应该在代码运行时连续加载它们，但每个页面加载只加载一次，除非您在点击处理程序或计时器回调中有此代码。您可能想发布更多代码。
这个问题只有在火狐测试后才会出现。
问题——为什么你从不在 imganimate() 函数中增加cornerno？你永远不会移动到下一张图片。
你可能会忽略注释行 - “一些逻辑来改变cornerno”
等等，如果您要做的只是将#surveyicon 的 src 属性设置为当前图像的 src 属性，为什么还要创建图像数组呢？设置两个变量，一个用于路径，一个用于文件扩展名，而不是分配将所有图像放在一个数组中，然后执行.attr("src", path + i + file_ext)，不是更有意义吗？实际上，一个更好的主意是看看您是否可以以某种方式将“src”设置为引用数组中的实际图像，而不仅仅是服务器上文件的相对路径。

标签： javascript jquery

【解决方案1】：

img 未定义。只需添加一行“var img = new Array();”在“for (var i=1;ivar 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();

【讨论】：

我发布的代码只是代码的一部分。问题在于 Firefox 的奇怪行为。
另外，最好使用 var img = [] 来声明一个数组。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您已经创建了十个 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);
}

【讨论】：

我不认为使用这段代码对我有好处。我在#surveyicon 节点上做了一些逻辑。我刚刚发现问题只出现在 FF 3.5.x 中。

【解决方案4】：

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

【讨论】：