¿Se rompen las imágenes al actualizar la página?

Question

Estoy extrayendo datos de una base de datos con Ajax y llenando dinámicamente una etiqueta div con elementos de imagen. El nombre del archivo de imagen corresponde a los datos en la base de datos.

Por ejemplo, si había algo en la base de datos llamado 'foo', tengo un elemento llamado 'img / foo.jpg'

Mi javascript extrae los datos y crea una imagen con el src si 'img / foo.jpg' establece la clase y luego la escribe en el div correcto.

En su mayor parte, esto funciona según lo previsto, pero ocasionalmente en una actualización (lo hago consultando la base de datos, borrando todos los divs y reescribiendo los nodos cada 30 segundos), ocasionalmente algunas de las imágenes se rompen / no se cargan. No hay rima o razón para cuál es, a veces no le pasa a ninguno, y a veces a varios.

Si hace clic derecho - > mostrar imagen, actualizar manualmente o esperar a que extraiga los datos nuevamente, muestra la imagen como se esperaba. Por lo tanto, sé que los datos se extraen y escriben correctamente, y parece que no se puede cargar la imagen.

¿Alguien sabe por qué o cómo abordar este problema?

Answer 1

Pruébelo en Firefox con el complemento Firebug, con el panel Net habilitado y es posible que pueda ver por qué fallan las recuperaciones de las imágenes.

Answer 2

Pido disculpas si esta no es una buena respuesta, pero si tiene muchas imágenes en su página, puede ser que el navegador (y esto no se limita a IE6) no haya descargado los datos para todas ellas.

Si está " borrando todos los divs y reescribiendo los nodos cada 30 segundos " es posible que se encuentre con el problema sugerido por la pregunta de soporte técnico de Microsoft " ¿Cómo configuro Internet Explorer para descargar más de dos archivos a la vez? " ;. Es posible que note que las imágenes se descargan.

En lugar de volver a descargar todas las imágenes juntas (en paralelo), es posible que la actualización de las imágenes en serie sea más confiable de esta manera:

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);