несовместимая загрузка наложений изображений с использованием div с background-image - PullRequest
Новая
       28

несовместимая загрузка наложений изображений с использованием div с background-image

2 голосов
/ 23 февраля 2012

Я использую jQuery для добавления некоторых наложений изображений поверх изображений продуктов, но у меня возникают проблемы с отображением наложений последовательно.

css в теле страницы определяет фон наложения-image paths: 

<body>
.... //products grid
    <div class="producttile" data-overlay-pid="abc"> ...</div> 
     //end products grid
  <style>
    .top_seller { background-image: url('http://mysite.com/overlays/top_seller.png');}
    .clearance { background-image: url('http://mysite.com/overlays/clearance.png');}
  </style>
</body>

Я использую полные пути, поэтому у меня нет проблем относительного пути.

После загрузки страницы я делаю ajax-вызов в веб-сервис для возврата JSON-информации о том, какой продукт должен получить какие наложения.Ответ json содержит имя обратного вызова и параметры для обратного вызова: 

[{"params":{"pid":"abc","overlay":"top_seller"},"callback":"setOverlay"},{"params":{"pid":"xyz","overlay":"clearance"},"callback":"setOverlay"}]

Вызов ajax завершает работу и вызывает функцию обратного вызова, которая создает пустой элемент div, назначает ему класс оверлея и добавляет его к продукту div. 

setOverlay : function(params) {
  var pid = params['pid'];
  var el = jQuery(selector + "[data-overlay-pid='"+params['pid']+"']");
    //inject an overlay on this element
    //add div with class of size
    el.css('position','relative');
    var new_overlay = jQuery('<div>');
    new_overlay.attr('class',params['overlay']);
    new_overlay.prependTo(el);
}

Я проверил это с двумя разными наложениями, и этот процесс работает нормально в Chrome.Но в Firefox один из оверлеев загружается, но не другой.Когда я смотрю на сетевую консоль, 2-е наложенное фоновое изображение никогда не загружается.Это несоответствие между браузерами для меня похоже на состояние гонки, когда фоновое изображение загружено не полностью, чтобы быть доступным, но я не смог найти никакой информации для его исправления.

Я уже использую document.readyперед вызовом моего сценария ajax.Как мне это исправить?

ОБНОВЛЕНИЕ: весь код / ​​CSS упрощен, чтобы его было легче читать.

ОБНОВЛЕНИЕ: в firebug, когда я проверяю div оверлея, класс вообще не содержит свойства background-image.в chrome, когда я проверял наложение, у класса есть URL-адрес фонового изображения, но есть строка через него и восклицательный знак, в котором указано недопустимое значение свойства.

...