Firefox での PreloadJS の動作に問題があります。実際、これまで誰もこの問題を抱えていなかったとは信じがたいので(同じ動作を説明している人を見つけることができませんでした)、おそらく私は何か間違ったことをしているだけです... 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 で実行すると、私が説明している動作に気付くでしょう。
だから基本的に私がここでやっていることはこれです:
- domready では、PreloadJS が画像をプリロードします (実際にはまだページのどこにも使用されていません。
- プリロードが完了すると、赤い円が緑色に変わります。
- その直後に新しい div がページに追加され、その div は以前にプリロードされた画像を背景画像として使用します。
Chrome での動作方法は、円の色が変わるのとほぼ同じ瞬間に画像が表示されるということです。これは、プリロードされているため理にかなっています。Firefox スルーでは、円の色が変わり、画像が表示されるまでに時間がかかります - まるで Firefox が画像を再度読み込んでいるかのようです。
この動作の説明とこれを修正する方法はありますか?