FF中的移位重裝給出了意想不到的結果

Question

我正在使用img.src替換和<canvas>標籤呈現簡單的動畫。目前它只能在FireFox（FF 3.5.3，Mac OS X 10.5.5）中使用，所以跨瀏覽器兼容性不是問題。

頁面首次加載或加載到新窗口或選項卡時，似乎所有工作都按預期工作，並且簡單重新加載時的緩存行爲似乎不成問題;但是，如果我試圖用shift-reload強制重裝，我會遇到問題。即使圖像已經預先加載，預加載的動畫圖像似乎也不可用於瀏覽器，然後瀏覽器嘗試從服務器加載每個新的img.src。

我在看這裏的瀏覽器錯誤，還是在我的代碼中有東西是我看不到的？這是我實施js課程的第一步，所以在這裏可能會有很多我不明白的地方。

歡迎來自組裝明智的任何見解。你可以看到我在談論的：

http://neolography.com/staging/mrfm/spin-sim.html

感謝，

喬恩

Answer 1

感謝ekhaled，誰試過。我現在滿意，這是一個瀏覽器的bug： Mozilla bug #504184

我有一個精簡的例子http://neolography.com/staging/shift-reload/shift-reload-testcase.html，我將離開。我鼓勵所有人在mozilla bug跟蹤器中爲這個bug投票，這樣它就會得到修復。

j

Answer 2

當你轉移重裝你告訴瀏覽器重裝 - 不會從緩存中。

因此，從服務器獲取圖像應該不會讓您感到意外。

圖像可以在JavaScript中預裝了下面的代碼：

img = new Image(); 
img.src = "your/image/path"; 

如果你想使用它們，可以幫助前的圖像加載。

Answer 3

我看看你的代碼，你必須在

function countLoadedImages() { 
     loadedImgs++; 
     if (loadedImgs == images.length){ 
      $("#loading-image").hide(); 
      $("#controls").fadeIn(100); 

     } 
    } 


    animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata)); 

動畫=新simAnim行，而不管執行，如果全部100個圖像加載或不...

的document.ready（）以下解決這個問題

一種可能是移動該行的countLoadedImages函數內部，像這樣：

function countLoadedImages() { 
     loadedImgs++; 
     if (loadedImgs == images.length){ 
      $("#loading-image").hide(); 
      $("#controls").fadeIn(100); 
      animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata)); 

     } 
    } 

這種方式，功能一旦所有的IM執行年齡已加載