圖片動畫不斷請求圖片

我測試了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保持請求圖像連續的（我希望它只是要求每個獨特的圖像只有一次）。

我該怎麼辦？

來源

2009-07-29 Billy

你是什麼意思不斷？它應該在代碼運行時連續加載它們，但每載入一次只會加載一次，除非在click處理程序或定時器回調中有此代碼。你可能想發佈更多的代碼。 – tvanfosson 2009-07-29 12:31:30

更多代碼已發佈。 – Billy 2009-07-29 12:35:01

此問題僅在測試後出現在Firefox中。 – Billy 2009-07-29 12:39:29

這似乎是一個錯誤的FF3.5.x. 不確定錯誤是否已被修復。

來源

2010-01-08 09:48:50 Billy

您已經創建10個DOM節點，設置其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); 
}

來源

2009-07-29 12:56:46 mwilcox

你能發表一些這樣的示例代碼嗎？ – Billy 2009-07-29 13:01:50

幾乎所有我找到的教程都使用類似的代碼來實現這一點。 – Billy 2009-07-29 13:10:04

我不認爲使用這段代碼對我有好處。我在#surveyicon節點上做了一些邏輯。我剛剛發現問題僅出現在FF 3.5.x中。 – Billy 2009-08-02 04:47:42

IMG是不確定的。只需添加一行「var img = new Array（）;」之前「爲（VAR I = 1;我< = 10;我++）{」

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

來源

2009-07-29 14:02:22

我發佈的代碼只是代碼的一部分。問題在於Firefox的奇怪行爲。 – Billy 2009-07-29 15:36:01

另外，最好使用var img = []來聲明一個數組。 – Billy 2009-07-29 15:36:39

嘗試組成圖像的成像精靈地圖的單個圖像文件，然後使用CSS定位在圖像周圍作爲移位背景圖。它會更快，並避免任何重新加載。

來源

2009-07-31 14:28:17 Killroy

圖片動畫不斷請求圖片

回答

相關問題