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

Question

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

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

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

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

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

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

Answer 1

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

Answer 2

Извините, если это не очень хороший ответ, но если на вашей странице много изображений, возможно, браузер (и это не ограничивается 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);