Le immagini che si interrompono all'aggiornamento della pagina?

Question

Sto estraendo i dati da un database con Ajax e popolando dinamicamente un tag div con elementi di immagine. Il nome del file immagine corrisponde ai dati nel database.

Ad esempio se nel database c'era qualcosa chiamato "pippo", ho un oggetto chiamato "img / pippo.jpg"

Il mio javascript estrae i dati e crea un'immagine con src se 'img / foo.jpg' imposta la classe e quindi la scrive nel div corretto.

Nella maggior parte dei casi funziona come previsto, ma occasionalmente durante un aggiornamento (devo interrogare il database, cancellare tutti i div e riscrivere i nodi ogni 30 secondi), a volte alcune immagini si spezzano / non si caricano. Non c'è rima o ragione per quale sia, a volte capita a nessuno, a volte a molti.

Se fai clic con il pulsante destro del mouse - > mostra immagine, aggiorna manualmente o attendi che i dati vengano nuovamente estratti, visualizza l'immagine come previsto. Pertanto, so che i dati vengono estratti e scritti correttamente e sembra che non riesca a caricare l'immagine.

Qualcuno sa perché o come affrontare questo problema?

Answer 1

Provalo in Firefox con il componente aggiuntivo Firebug, con il pannello Net abilitato e potresti essere in grado di vedere perché i recuperi per le immagini non riescono.

Answer 2

Ci scusiamo se questa non è una buona risposta, ma se hai molte immagini sulla tua pagina, è possibile che il browser (e questo non sia limitato a IE6) non abbia scaricato i dati per tutti loro.

Se stai cancellando tutti i div e riscrivendo i nodi ogni 30 secondi " potresti riscontrare il problema suggerito dalla domanda di supporto Microsoft " Come posso configurare Internet Explorer per scaricare più di due file contemporaneamente? " ;. È possibile che si noti che le immagini vengono scaricate.

Invece di scaricare nuovamente tutte le immagini insieme (in parallelo), potresti trovare l'aggiornamento seriale delle immagini per essere più affidabile in questo modo:

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