Sapere quando le immagini hanno finito di caricare in risposta AJAX

Question

Ho una funzione jQuery ajax che carica del contenuto in un div, parte del contenuto è immagine. Mi piacerebbe dire fino a quando quelle immagini che sono appena state caricate nella mia ajax, hanno finito di caricare e POI eseguire una funzione, come mostrare il contenuto. In questo modo, non avrò caricato il contenuto nel div e le immagini inizieranno a caricarsi. Voglio che vengano caricati, quindi inserire il contenuto o show() il contenuto nel div.

Ho visto molte soluzioni a questo, come l'utilizzo di .load(), ma non sembra funzionare per il contenuto che è stato caricato utilizzando Ajax.

Answer 1

È necessario aggiungere il gestore di caricamento nel richiamo AJAX per farlo applicare alle immagini che vengono caricate tramite la chiamata AJAX. Si potrebbe anche voler impostare un timer per mostrare il contenuto dopo un certo intervallo nel caso in cui le immagini vengano caricate prima che venga applicato il gestore di carico.

$.ajax({ 
    ... 
    success: function(data) { 
      var imageCount = $(data).filter('img').length; 
      var imagesLoaded = 0; 
      $(data).hide() 
       .appendTo('#someDiv') 
       .filter('img') 
       .load(function() { 
        ++imagesLoaded; 
        if (imagesLoaded >= imageCount) { 
         $('#someDiv').children().show(); 
        } 
        }); 
      setTimeout(function() { $('#someDiv').children().show() }, 5000); 
     } 
}); 

Answer 2

$("img").load() non funziona perché le immagini vengono caricate dinamicamente; quel comando si applicherà solo alle immagini sulla pagina al momento.

utilizzare $("img").live("load") per tracciare quando le immagini sono state caricate.

Answer 3

Questa è una versione aggiornata del codice tvanfosson fornita.

è necessario assicurarsi che la variabile imageCount conta un elenco di nodi e non una stringa come era il problema nel codice originale da posso dedurre:

$.ajax({ 
    url  : 'somePage.html', 
    dataType : "html", 
    success : function(data) { 

     $(data).hide().appendTo('#someDiv'); 

     var imagesCount = $('#someDiv').find('img').length; 
     var imagesLoaded = 0; 

     $('#someDiv').find('img').load(function() { 
      ++imagesLoaded; 
      if (imagesLoaded >= imagesCount) { 
       $('#someDiv').children().show(); 
      } 
     }); 

     var timeout = setTimeout(function() { 
      $('#someDiv').children().show(); 
     }, 5000); 
    }      
});