Images brisées lors de l'actualisation de la page?

Question

Je suis en train d'extraire des données d'une base de données avec Ajax et de remplir dynamiquement une balise div avec des éléments d'image. Le nom du fichier image correspond aux données de la base de données.

Par exemple, s'il y avait quelque chose dans la base de données appelé "foo", j'ai un élément appelé "img / foo.jpg"

Mon javascript extrait les données et crée une image avec le src si 'img / foo.jpg' définit la classe puis l'écrit dans le div correct.

Généralement, cela fonctionne comme prévu, mais parfois lors d'une actualisation (je l'ai interrogé sur la base de données, effaçant tous les div et réécrivant les nœuds toutes les 30 secondes), parfois certaines images se cassent / ne se chargent pas. Il n'y a pas de rime ou de raison pour laquelle il s'agit, parfois il en arrive à rien, et parfois à plusieurs.

Si vous faites un clic droit - > afficher une image, actualiser manuellement ou attendre que les données soient à nouveau extraites, il affiche l'image comme prévu. Par conséquent, je sais que les données sont extraites et écrites correctement et que le chargement de l'image semble échouer.

Quelqu'un sait-il pourquoi ou comment résoudre ce problème?

Answer 1

Essayez-le dans Firefox avec le module complémentaire Firebug, avec le panneau Réseau activé et vous pourrez peut-être comprendre pourquoi les extractions des images échouent.

Answer 2

Toutes mes excuses pour ce qui ne convient pas, mais si votre page contient de nombreuses images, il se peut que le navigateur (et cela ne se limite pas à IE6) n’a pas téléchargé les données pour toutes.

Si vous effacez tous les divs et réécrivez les nœuds toutes les 30 secondes, " vous pouvez rencontrer le problème évoqué par la question du support technique & Comment configurer Internet Explorer pour qu'il télécharge plus de deux fichiers à la fois? " ;. Il se peut que vous remarquiez les images en cours de téléchargement.

Au lieu de re-télécharger toutes les images ensemble (en parallèle), la mise à jour séquentielle des images peut s'avérer plus fiable, comme suit:

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