PreloadJS 对于后来附加的元素不能正常工作（在 Firefox 中）

Question

我对 PreloadJS 在 Firefox 上的行为方式有疑问。实际上，我很难相信以前没有其他人遇到过这个问题（找不到描述相同行为的人）所以也许我只是做错了什么......它在 google [=34= 中工作得很好] 通过.

这是 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，您会注意到我正在描述的行为。

基本上我在这里做的是：

在 domready 上 PreloadJS 预加载图像（它实际上还没有在页面上的任何地方使用。
预加载完成后，红色圆圈变为绿色。
在新 div 附加到页面之后，div 使用之前预加载的图像作为背景图像。

它在 Chrome 中的行为方式是图像出现的时间与圆圈改变颜色的时间几乎相同 - 这是有道理的，因为它已被预加载。在 Firefox 上，圆圈会改变颜色，然后在图像出现之前会有延迟 - 就好像 Firefox 正在再次加载它一样。

是否对此行为有任何解释以及解决此问题的方法？

Answer 1

在开发工具中比较两者：

据我所知，Firefox 没有从缓存中检索图像，而 Chrome 会。

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

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

PreloadJS 对于后来附加的元素不能正常工作（在 Firefox 中）

PreloadJS doesn't work correctly for elements appended later (in Firefox)

javascript

firefox

preloadjs