Événement jQuery pour les images chargées

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 trouve pas 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 se cassera-t-il si une image ne se charge pas? Il est extrêmement important que la méthode soit appelée, et au bon moment.

Selon la documentation de jQuery , il existe un certain nombre de mises en garde pour l'utilisation de l'événement load avec des images. Comme indiqué dans une autre réponse, le plugin ahpi.imgload.js est cassé, mais l'essentiel Paul Irish lié n'est plus maintenu.

Pour Paul Irish, le plugin canonique pour détecter les événements de chargement d'image terminé est maintenant à:

https://github.com/desandro/imagesloaded

Si vous ne voulez pas vérifier toutes les images, mais une image spécifique (par exemple, une image que vous avez remplacée dynamiquement une fois le DOM terminé), vous pouvez utiliser ceci:

$('#myImage').attr('src', 'image.jpg').on("load", function() {  
  alert('Image Loaded');  
});  

Vous pouvez utiliser mon plugin waitForImages pour gérer cela ...

$(document).waitForImages(function() {
   // Loaded.
});

L'avantage de ceci est que vous pouvez le localiser sur un élément ancêtre et il peut éventuellement détecter les images référencées dans le CSS.

Ce n'est cependant que la pointe de l'iceberg, consultez la documentation pour plus de fonctionnalités.

L'utilisation de jQuery $ (). Load () comme gestionnaire d'événements IMG n'est pas garantie. Si l'image se charge à partir du cache, certains navigateurs peuvent ne pas déclencher l'événement. Dans le cas des versions (plus anciennes?) De Safari, si vous avez modifié la propriété SRC d'un élément IMG sur la même valeur , l'événement onload ne se déclenchera PAS.

Il semble que cela soit reconnu dans la dernière jQuery (1.4.x) - http://api.jquery.com/load-event - pour citer:

Il est possible que l'événement de chargement ne soit pas déclenché si l'image est chargée à partir du cache du navigateur. Pour tenir compte de cette possibilité, nous pouvons utiliser un événement de chargement spécial qui se déclenche immédiatement si l'image est prête. event.special.load est actuellement disponible en tant que plugin.

Il existe maintenant un plug-in pour reconnaître ce cas et la propriété "complete" d'IE pour les états de chargement des éléments IMG: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js

Selon cette réponse , vous pouvez utiliser l' événement de chargement jQuery sur l' windowobjet au lieu de document:

jQuery(window).load(function() {
    console.log("page finished loading now.");
});

Cela sera déclenché une fois que tout le contenu de la page aura été chargé. Cela diffère de celui jQuery(document).load(...)qui est déclenché une fois le chargement du DOM terminé.

imagesLoaded Plugin est la voie à suivre, si vous avez besoin d'une solution crossbrowser

 $("<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'un WorkAround IE, cela fera l'affaire

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

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

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

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

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

$( "img.photo" ).load(function() {

    $(".parrentDiv").css('height',$("img.photo").height());
    // very simple

}); 

J'ai créé mon propre script, car je trouvais que de nombreux plugins étaient assez gonflés et je voulais juste qu'il fonctionne comme je le voulais. Le mien vérifie si chaque image a une hauteur (hauteur de l'image native). J'ai combiné cela avec la fonction $ (window) .load () pour contourner les problèmes de mise en cache.

Je l'ai beaucoup commenté dans le code, donc cela devrait être intéressant à regarder, même si vous ne l'utilisez pas. Cela fonctionne parfaitement pour moi.

Sans plus tarder, voilà:

Script imgLoad.js

En attendant que toutes les images se chargent ...
J'ai trouvé la réponse à mon problème avec jfriend00 ici jquery: comment écouter l'événement chargé d'image d'un div conteneur? .. et "if (this.complete)"
En attendant que tout se charge et éventuellement en cache! .. et j'ai ajouté l'événement "error" ... c'est robuste sur tous les navigateurs

$(function() { // Wait dom ready
    var $img = $('img'), // images collection
        totalImg = $img.length,
        waitImgDone = function() {
            totalImg--;
            if (!totalImg) {
                console.log($img.length+" image(s) chargée(s) !");
            }
        };
    $img.each(function() {
        if (this.complete) waitImgDone(); // already here..
        else $(this).load(waitImgDone).error(waitImgDone); // completed...
    });
});

Démo: http://jsfiddle.net/molokoloco/NWjDb/

window.load = function(){}

Il est entièrement pris en charge par tous les navigateurs et déclenche un événement lorsque toutes les images sont complètement chargées.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload