Déterminer quand les images sont chargées après leur insertion en utilisant jQuery.load ('url.html')

Question

J'ai actuellement quelque chose de similaire à cela, il charge un div sur la page cible qui contient des images.

$('a.galleryNext').click(function(){ 
    // chnage the image to loading 
    $("#info").html("LOADING"); 
    $("#currentGal").load("gallery.php div#gallery"+currentgallery, function(){ 
     //this fires much too early, the images are still loading... 
     $("#info").html("DONE"); 
    }); 
}); 

Ce que je ne peux pas comprendre comment changer #info en quelque chose d'autre après les images de la div sont fait charger (ce qui arrive après que la charge retourne le code html). Y a-t-il un moyen de faire cela?

Answer 1

C'est exactement ce dont vous avez besoin. Je l'utilise tout le temps au travail pour charger d'énormes cartes et c'est vraiment facile à utiliser.

http://jqueryfordesigners.com/image-loading/

Answer 2

Le rappel vérifie que le contenu est renvoyé, ce qui signifie que le balisage est renvoyé. Vous devrez faire une vérification différente pour voir si les images sont téléchargées.

Vous devrez énumérer les images dans le code HTML et vérifier si elles ont été chargées. Une solution consisterait peut-être à obtenir le nombre d'images et à incrémenter un compteur chargé chaque fois qu'une image est chargée, en utilisant la fonction de rappel .load. Lorsque le nombre chargé correspond au nombre d'images, tout le contenu est prêt.

On dirait que cela pourrait être utile pour vous:

Waiting for images loading with JQuery

EDIT

Voici une solution de travail, dans FF. Je ne sais pas si c'est la meilleure façon, ou comment cela fonctionne dans IE, mais vous avez l'idée.

 var $images = $("#somediv img"); 
     if ($images.length) { 

      var imageCount = $images.length; 
      var imageLoadedCount = 0; 

      $images.each(function() { 
       $(this).load(function() { 
        imageLoadedCount += 1; 
       }); 
      }); 

      var intervalId = setInterval(function() { 
       if (imageCount == imageLoadedCount) { 
        //console.log("all loaded"); 
        clearInterval(intervalId); 
       }; 
      }, 200); 


     }; 

Answer 3

J'aime utiliser les classes pour contrôler un chargement/gif fait par background-image

également votre syntaxe load() regardé hors tension. voir: http://docs.jquery.com/Ajax/load

<style> 

.done { background-image:done.gif; } 
.loading { background-image:loading.gif; } 

</style> 
<script> 
    $('a.galleryNext').click(function(){ 

     $("#info").addClass("loading"); 
     $("#info").removeClass("done"); 
     $("#currentGal").load("gallery.php", null, function(){ 

      $("#info").removeClass("loading"); 
      $("#info").addClass("done"); 
     }); 
    }); 
</script> 

<div id="currentGal"></div> 
<div id="info"></div> 

Answer 4

J'ai adapté cette fonction très simple à partir du code que j'ai trouvé sur un autre forum. Il inclut une fonction de rappel que vous pouvez utiliser lorsque les images sont chargées.

function imgsLoaded(el,f){ 
    var imgs = el.find('img'); 
    var num_imgs = imgs.length; 

    if(num_imgs > 0){ 
    imgs.load(function(){ 
     num_imgs--; 
     if(num_imgs == 0) { 
     if(typeof f == "function")f();//custom callback 
     } 
    }); 
    }else{ 
    if(typeof f == "function")f();//custom callback 
    } 
} 

USAGES:

imgsLoaded($('#container'),function(){ 

//stuff to do after imgs have loaded 

}); 

Hope this helps!

W.

Answer 5

Voici une fonction que je viens avec:

function when_images_loaded($img_container, callback) { //do callback when images in $img_container are loaded. Only works when ALL images in $img_container are newly inserted images. 
    var img_length = $img_container.find('img').length, 
     img_load_cntr = 0; 

    if (img_length) { //if the $img_container contains new images. 
     $('img').load(function() { //then we avoid the callback until images are loaded 
      img_load_cntr++; 
      if (img_load_cntr == img_length) { 
       callback(); 
      } 
     }); 
    } 
    else { //otherwise just do the main callback action if there's no images in $img_container. 
     callback(); 
    } 

}

Par pure coïncidence, il est presque identique à la réponse de pagewil, mais je suis venu avec moi sur mon propre . ; D

Utilisez cette fonction après avoir contenu .load() dans un conteneur.

par exemple.:

$("#foobar").load("gallery.php", null, function(){ 
    when_images_loaded($("#foobar"), function(){ 
     $("#info").removeClass("loading"); 
     $("#info").addClass("done"); 
    }); 
});