Bilder auf einer Seite Refresh zu brechen?

Question

Ich bin ziehen Daten aus einer Datenbank mit Ajax und dynamisch einen div-Tag mit Bildelementen bestückt. Der Bilddateiname entspricht die Daten in der Datenbank.

Zum Beispiel, wenn es etwas in der Datenbank mit dem Namen ‚foo‘ war, ich habe einen Artikel ‚img / foo.jpg‘ genannt

zieht Meine JavaScript, um die Daten und erstellt ein ein Bild mit dem src wenn ‚img / foo.jpg‘ die Klasse setzt und schreibt sie dann in der richtigen div.

Für den größten Teil dieser wie vorgesehen funktioniert, aber gelegentlich auf einem Refresh (ich habe es auf die Datenbank abfragen, Clearing alle divs, und Umschreiben der Knoten alle 30 Sekunden), gelegentlich einige der Bilder brechen / nicht geladen werden. Es gibt keinen Reim oder Grund zu der man es ist, manchmal ist es zu keiner geschieht, und manchmal mehrere.

Wenn Sie mit der rechten Maustaste -> Bild anzeigen, manuell aktualisieren, oder warten Sie, die Daten erneut zu ziehen, es zeigt das Bild, wie beabsichtigt. Daher weiß ich, Daten werden korrekt gezogen und geschrieben, und es scheint nur zu sein Versagen, das Bild zu laden.

Wer weiß, warum oder wie dieses Problem zu lösen?

Answer 1

Versuchen Sie es in Firefox mit dem Firebug Add-on, mit dem Net-Panel aktiviert ist und Sie könnten in der Lage sein, zu sehen, warum die Abholungen für die Bilder versagen.

Answer 2

Entschuldigt, wenn dies nicht eine gute Antwort sein, aber wenn Sie viele Bilder auf Ihrer Seite haben, kann es, dass der Browser sein (und dies ist auf IE6 nicht beschränkt auf) die Daten für alle von ihnen nicht heruntergeladen hat.

Wenn Sie „Löschen aller divs, und Umschreiben der Knoten alle 30 Sekunden“ sind Sie in das Problem bei der Microsoft Support-Frage angedeutet laufen könnte „ Wie konfiguriere ich Internet Explorer mehr als zwei Dateien auf einmal herunterladen? “. Es kann sein, dass Sie die Bilder bemerken heruntergeladen werden.

Statt Wieder Download aller Bilder zusammen (parallel), Sie finden können Bilder seriell zuverlässiger zu sein wie so Aktualisierung:

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