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

一种可能的解决方案可能与图像大小有关，详细信息 here .

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