イメージアニメーションが画像を要求し続ける

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

をそして、アレイ「IMG」をループする要素のsrcを変更：

現在、私はそれを行うには、次のコードを使用します。

しかし、firefoxは画像を継続的に要求し続けます（私は一意の画像を1回だけ要求します）。

どうすればよいですか？

Answer 1

これはFF3.5.xのバグです。 バグが既に修正されているかどうかは不明です。

Answer 2

既にDOMノードを10個作成し、srcを設定してイメージをロードしました。なぜあなたはsrcを再度設定しますか？これらの10個のノードを今すぐ回転させたいと思います。 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 3

IMGは未定義です。 "var img = new Array（）;"という行を追加するだけです。前「の（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 4

スプライトマップのような1つの画像ファイルに画像を構成してみて、次にとして周辺の画像をシフトするためにCSSの位置を使用背景画像。はるかに高速になり、リロードを避けることができます。