I'm encountering an issue with the behavior of PreloadJS specifically on Firefox. It's surprising to me that no one else seems to have experienced this problem before as I couldn't find any similar descriptions online. Perhaps I am simply overlooking something... it works perfectly fine in Google Chrome though.
Here is the JavaScript 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');
});
View the example here: http://codepen.io/Deto15/pen/KdpRdx
If you run it on Firefox and do a Ctrl+F5, you'll observe the behavior I mentioned.
Essentially, what I am attempting here is:
- Upon document ready, PreloadJS preloads an image (which is not yet utilized on the page).
- Once the preloading is complete, the red circle transitions to green.
- Immediately after that, a new div is added to the page, using the previously preloaded image as its background-image.
In Chrome, the image appears almost simultaneously with the color change of the circle - which makes sense since it has been preloaded. However, in Firefox, there is a delay between the color change and the appearance of the image, giving the impression that Firefox is loading it again.
Is there a reason for this behavior and is there a solution to resolve it?