ฉันมีปัญหากับการทำงานของ PreloadJS บน Firefox ที่จริงแล้วมันยากสำหรับฉันที่จะเชื่อว่าไม่มีใครประสบปัญหานี้มาก่อน (ไม่พบใครที่อธิบายพฤติกรรมแบบเดียวกัน) ดังนั้นบางทีฉันอาจทำอะไรผิดไป ... มันทำงานได้ดีใน 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 กำลังโหลดอีกครั้ง
มีคำอธิบายเกี่ยวกับพฤติกรรมนี้และวิธีแก้ไขปัญหานี้หรือไม่?
