Savoir quand les images sont chargées dans la réponse AJAX

Question

J'ai une fonction jQuery ajax qui charge du contenu dans un div, une partie du contenu est une image. Je voudrais dire jusqu'à ce que les images qui viennent d'être chargées dans mon ajax, ont terminé le chargement, et ensuite exécuter une fonction, telle que montrer le contenu. De cette façon, je n'aurai pas le contenu chargé dans la div et les images commencent à se charger. Je veux qu'ils soient chargés, puis mettre le contenu, ou show() le contenu de la div.

J'ai vu beaucoup de solutions à cela, comme en utilisant .load(), mais cela ne semble pas fonctionner pour le contenu qui a été chargé en utilisant ajax.

Answer 1

Vous devez ajouter le gestionnaire de charge dans le rappel AJAX pour qu'il s'applique aux images qui sont chargées via l'appel AJAX. Vous pouvez également définir un minuteur pour afficher le contenu après un certain intervalle au cas où les images seraient chargées avant l'application du gestionnaire de chargement.

$.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() ne fonctionnera pas car les images sont chargées dynamiquement; cette commande ne s'appliquera qu'aux images de la page à ce moment-là.

utilisez $("img").live("load") pour suivre le chargement des images.

Answer 3

Ceci est une version mise à jour du code tvanfosson fourni.

Vous devez vous assurer que la variable est imageCount compte une liste de noeuds et non une chaîne comme cela a été le problème dans le code original de je peux en déduire:

$.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); 
    }      
});