PreloadJS對於以后添加的元素無法正常工作（在Firefox中）

Question

我對PreloadJS在Firefox上的行為有疑問。 實際上，我很難相信以前沒有其他人遇到過這個問題（找不到任何人描述相同的行為），所以也許我只是做錯了什么...它在谷歌瀏覽器中正常工作。

這是JS部分：

$(document).ready(function () {
  var preloadBG = new createjs.LoadQueue();
   preloadBG.addEventListener("fileload", function(){
     $('#light').css("background-color","green");
     $("#container").append('<div id="image"></div>');
   });
   preloadBG.loadFile('http://i.imgur.com/ifvZ5Ss.jpg');
});

在此處查看示例： http : //codepen.io/Deto15/pen/KdpRdx

如果您使用Firefox和Ctrl + F5運行它，您會注意到我正在描述的行為。

所以基本上我在這里是這樣的：

1. 在domready上，PreloadJS會預加載圖像（頁面上尚未實際使用它。
2. 預加載完成后，紅色圓圈變為綠色。
3. 在該新div追加到頁面之后，該div使用先前預加載的圖像作為背景圖像。

它在Chrome瀏覽器中的行為方式是，圖片與圓圈更改顏色的時間幾乎相同，這是有道理的，因為它已預先加載。 在Firefox上，圓圈會更改顏色，然后在圖像出現之前會有一個延遲-就像Firefox在重新加載一樣。

是否對此行為有任何解釋以及解決此問題的任何方法？

Answer 1

比較開發工具中的兩個：

據我所知，Firefox無法從緩存中檢索圖像，而Chrome卻可以。

一個可能的解決方案可能與圖像大小，詳見這里 。

我建議先使用較小的圖像進行測試，看看是否可以解決緩存問題。