Événement jQuery pour les images chargées

Question

Est-il possible de détecter quand toutes les images sont chargées via un événement jQuery ?

Idéalement, il devrait y avoir un

$(document).idle(function()
{
}

ou

$(document).contentLoaded(function()
{
}

Mais je ne peux pas trouver une telle chose.

J'ai pensé à joindre un événement comme celui-ci :

$(document).ready(function()
{
    var imageTotal = $('img').length;
    var imageCount = 0;        
    $('img').load(function(){if(++imageCount == imageTotal) doStuff();});
}

Mais cela va-t-il se briser si une image ne se charge pas ? Il est essentiel que la méthode soit appelée, et au bon moment.

Answer 1

imagesLoaded Le plugin est la solution idéale si vous avez besoin d'une solution multi-navigateur.

 $("<img>", {src: 'image.jpg'}).imagesLoaded( function( $images, $proper, $broken ){
 if($broken.length > 0){
 //Error CallBack
 console.log('Error');
 }
 else{
 // Load CallBack
 console.log('Load');
 }
 });

Si vous avez juste besoin d'une solution de contournement de l'IE, cela fera l'affaire.

 var img = $("<img>", {
    error: function() {console.log('error'); },
    load: function() {console.log('load');}
    });
  img.attr('src','image.jpg');

Answer 2

Il y a une note sur le plugin ahpi.imgload.js en ce moment disant qu'il est actuellement cassé, et d'essayer ce gist à la place : https://gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

Answer 3

Pour les images de même origine, vous pouvez utiliser :

$.get('http://www.your_domain.com/image.jpg', imgLoaded);

function imgLoaded(){
    console.log(this, 'loaded');
}

Answer 4

Ce plugin peut peut-être vous être utile : http://www.farinspace.com/jquery-image-preload-plugin/

Answer 5

  function CheckImageLoadingState()
  {
     var counter = 0;
     var length = 0;

     jQuery('#siteContent img').each(function() 
     {
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
          length++;
     });

     jQuery('#siteContent img').each(function() 
     {  
        if(jQuery(this).attr('src').match(/(gif|png|jpg|jpeg)$/))
        {
           jQuery(this).load(function() 
           {
           }).each(function() {
              if(this.complete) jQuery(this).load();
            });
        }
        jQuery(this).load(function()
        {
           counter++;
           if(counter === length) 
           {  
              //function to call when all the images have been loaded
              DisplaySiteContent();
           }
        });
     });
  }