PreloadJS无法正常处理后来添加的元素（在Firefox中）

Question

我对PreloadJS在Firefox上的表现有疑问。实际上我很难相信其他人之前没有遇到过这个问题（找不到任何描述相同行为的人）所以也许我只是做错了什么......它在google chrome中运行得很好。

这是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缓存中检索图像。

一个可能的解决方案可能与图像大小有关，详见here。

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