PreloadJS работает неправильно для элементов, добавленных позже (в Firefox)

У меня проблема с поведением 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.

Итак, в основном, что я делаю здесь, это:

  1. На domready PreloadJS предварительно загружает изображение (на самом деле оно еще нигде на странице не используется.
  2. По завершении предварительной загрузки красный кружок становится зеленым.
  3. Сразу после этого новый div добавляется к странице, и этот div использует предварительно загруженное ранее изображение в качестве фонового изображения.

В Chrome он ведет себя так: изображение появляется почти в тот же момент, когда круг меняет цвет, и это имеет смысл, поскольку оно было предварительно загружено. В Firefox кружок меняет цвет, а затем возникает задержка перед появлением изображения — как будто Firefox загружает его снова.

Есть ли какое-либо объяснение этому поведению и способ исправить это?


javascript firefox preloadjs
person Chris Lejman    schedule 08.09.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Сравнение двух инструментов разработчика:

Сравнение Firefox и Chrome

Из того, что я вижу, Firefox не извлекает изображение из кеша, в то время как Chrome делает это.

Одно из возможных решений может быть связано с размером изображения, как подробно описано здесь.

Я бы посоветовал сначала протестировать изображения меньшего размера, чтобы увидеть, решит ли это проблему с кэшированием.

person Brian Liu    schedule 09.09.2015
comment
Я проверил ваше предложение, но не заметил никаких шансов :( Спасибо, что обратили мое внимание на то, что проблема на самом деле не связана с PreloadJS, а с самим Firefox. Мне вроде как удалось найти способ обойти это, но окончательный HTML отличается, поэтому я не уверен, смогу ли я использовать его в своем проекте.В любом случае, мой обходной путь заключается в том, что если я буду использовать полезную нагрузку, возвращаемую событием завершения PreloadJS, для добавления сгенерированного тега ‹img› , Firefox отобразит изображение, не загружая его во второй раз.Не совсем то, к чему я стремился, но просто оставлю его здесь на случай, если у кого-то возникнет такая же проблема. - person Chris Lejman; 12.09.2015