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

Question

I'm having a problem with how PreloadJS is behaving on Firefox. Actually it's hard for me to believe nobody else was having this problem before (couldn't find anyone describing same behavior) so perhaps I'm just doing something wrong... it works just fine in google chrome through.

Here's JS part:

$(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');
});

See example here: http://codepen.io/Deto15/pen/KdpRdx

You'll notice the behavior I'm describing if you run it with Firefox and Ctrl+F5.

So basically what I'm doing here is this:

1. On domready PreloadJS preloads image (it's not actually used anywhere on page yet.
2. On complete of preloading red circle turns to green.
3. Right after that new div is appended to page, and that div uses image preloaded earlier as background-image.

The way it behaves in Chrome is that image appears at pretty much same moment as when the circle changes color - and that makes sense since it's been preloaded. On Firefox through, the circle changes color and then there's a lag before image appears - as if Firefox was loading it again.

Is there any explanation to this behavior and any way to fix this?

Answer 1

Comparing the two in dev tools:

From what I can see, Firefox is not retrieving the image from cache while Chrome does.

One possible solution could be related to the image size, as detailed here .

I'd suggest testing with smaller images first to see if that resolves the caching issue.