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却可以。

一个可能的解决方案可能与图像大小，详见这里 。

我建议先使用较小的图像进行测试，看看是否可以解决缓存问题。