Изображения ломаются при обновлении страницы?

Question

Я извлекаю данные из базы данных с помощью Ajax и динамически заполняю тег div элементами изображения. Имя файла изображения соответствует данным в базе данных.

Например, если в базе данных было что-то с именем 'foo', у меня есть элемент с именем 'img / foo.jpg'

Мой javascript извлекает данные и создает изображение с помощью src, если 'img / foo.jpg' устанавливает класс, а затем записывает его в правильный div.

По большей части это работает так, как задумано, но иногда при обновлении (у меня он запрашивает базу данных, очищает все div и перезаписывает узлы каждые 30 секунд), иногда некоторые изображения ломаются / не загружаются. Там нет рифмы или причины, по которой это, иногда это случается ни с одним, а иногда с несколькими.

Если вы щелкнете правой кнопкой мыши -> показать изображение, обновите вручную или подождите, пока он снова извлечет данные, изображение отобразится в соответствии с назначением. Поэтому я знаю, что данные извлекаются и записываются правильно, и, похоже, не удается загрузить изображение.

Кто-нибудь знает, почему или как решить эту проблему?

Answer 1

Извините, если это не очень хороший ответ, но если на вашей странице много изображений, возможно, браузер (и это не ограничивается IE6) не загрузил данные для всех из них.

Если вы «очищаете все div и перезаписываете узлы каждые 30 секунд», вы можете столкнуться с проблемой, на которую намекает вопрос службы поддержки Microsoft « Как настроить Internet Explorer для загрузки более двух файлов одновременно время ». Возможно, вы заметили загружаемые изображения.

Вместо повторной загрузки всех изображений (параллельно), вы можете обнаружить, что обновление изображений поочередно более надежно, например:

var refreshCount = 0;
function updateImages() {
  var nextImage = refreshCount % document.images.length;
  var image = document.images[nextImage];
  if(image.complete) {
    var newImage = new Image();
    newImage.src = image.src;           
    image.parentNode.insertBefore(newImage,image);
    image.parentNode.removeChild(image);
    refreshCount++;
  }
  setTimeout(updateImages, 1000);
}
// Wait 20 sec before starting the refreshes 
// (gives time to get the images downloaded in the first place)
setTimeout(updateImages, 20000);    

Answer 2

Попробуйте это в Firefox с надстройкой Firebug, с включенной панелью «Сеть», и вы сможете увидеть причину сбоя при выборке изображений.