Image animation keeps requesting the images

Question

I test the code in IE7, FF, Chrome, Safari and this problem occurs in Firefox only.

I have checked that the problem only occurs in FF 3.5.x, but not FF 3.0.x.

I want to make an image animation which has 10 images in total.

Currently, I use the following code to do it:

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

And then change an element's src to loop through the array "img".

however, firefox keeps requesting the images continuous (I expect it only requests each unique image just once).

What should I do?

Answer 1

You've already created ten DOM nodes, set their src and loaded the images. Why would you set the src again? You want to rotate those ten nodes in and out now. You can either toggle style.display or remove and insert the nodes.

Here's my suggestion. I'm not well versed in JQuery so there may be a few additional shortcuts I've overlooked:

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 is undefined. just add a line "var img = new Array();" before "for (var i=1;i<=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

Try composing the images into a single image file like a sprite map and then use CSS positioning to shift the image around as a background image. It will be much faster and avoid any reloads.

Answer 4

This seems a bug in FF3.5.x. Not sure whether the bug has already been fixed.