web-dev-qa-db-fra.com

evé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 peux pas trouver une telle chose. 

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

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

Mais cette rupture se produira-t-elle si une image ne parvient pas à se charger? Il est extrêmement important que la méthode soit appelée et au bon moment.

jquerydom
96
Antony Carthy

Selon jQuery's documentation , il existe un certain nombre de mises en garde concernant l'utilisation de l'événement de chargement avec des images. Comme indiqué dans une autre réponse, le plug-in ahpi.imgload.js est cassé, mais le lien Paul Irish Gist n'est plus maintenu. 

Selon Paul Irish, le plugin canonical permettant de détecter les événements de chargement complet d’image est maintenant:

https://github.com/desandro/imagesloaded

115
johnpolacek

Si vous souhaitez vérifier non pas toutes les images, mais une image spécifique (par exemple, une image que vous avez remplacée dynamiquement après l'exécution de DOM), vous pouvez l'utiliser

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

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

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

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

Ceci n'est cependant que la partie visible de l'iceberg. Consultez la documentation } pour plus de fonctionnalités.

28
alex

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

Il semble que cela soit reconnu dans la dernière version de 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é "complète" d'IE pour les états de charge d'élément IMG: http://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload. js

20
jschrab

Selon cette réponse , vous pouvez utiliser le événement de chargement jQuery sur l’objet window 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 jQuery(document).load(...) qui est déclenché après le chargement du DOM.

16
Tom

imagesLoaded Le plugin est la solution, si vous avez besoin d'une solution multijoueur

 $("<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 suffira.

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

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

Il y a une note sur le plugin ahpi.imgload.js pour le moment disant qu'il est cassé, et d'essayer plutôt ce Gist: https://Gist.github.com/797120/7176db676f1e0e20d7c23933f9fc655c2f120c58

2
dotjay

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

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

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

});
0
Erfan Safarpoor
  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();
           }
        });
     });
  }
0
doofer

J'ai créé mon propre script, car de nombreux plug-ins étaient assez gonflés et je voulais simplement que cela fonctionne comme je le voulais. Mine vérifie si chaque image a une hauteur (hauteur d'image native). Je l'ai combiné à la fonction $ (window) .load () pour résoudre les problèmes de mise en cache. 

J'ai beaucoup commenté le code, donc ça 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

0
3Dom