web-dev-qa-db-fra.com

Détecter la charge d'image

Est-il possible de détecter une fois qu'une image a été chargée avec jQuery?

jqueryimage-load
55
Pablo

Vous pouvez utiliser le gestionnaire d'événements .load() , comme ceci:

$("#myImg").load(function() {
  alert('I loaded!');
}).attr('src', 'myImage.jpg');

Assurez-vous de l'attacher avant de définir la source, ou l'événement peut avoir déclenché avant d'attacher un gestionnaire pour l'écouter (par exemple, le chargement à partir du cache).

Si cela n'est pas réalisable (en définissant src après la liaison), assurez-vous de vérifier s'il est chargé et de le déclencher vous-même, comme ceci:

$("#myImg").load(function() {
  alert('I loaded!');
}).each(function() {
  if(this.complete) $(this).load();
});
107
Nick Craver

Il est tout aussi simple d'utiliser du Javascript simple:

  // Create new image
var img = new Image();

  // Create var for image source
var imageSrc = "http://example.com/blah.jpg";

  // define what happens once the image is loaded.
img.onload = function() {
    // Stuff to do after image load ( jQuery and all that )
    // Within here you can make use of src=imageSrc, 
    // knowing that it's been loaded.
};

  // Attach the source last. 
  // The onload function will now trigger once it's loaded.
img.src = imageSrc;
18
Peter Ajtai

Je fais également des recherches depuis longtemps et j'ai trouvé ce plugin pour aider merveilleusement à cela: https://github.com/desandro/imagesloaded

Cela semble être un tas de code, mais ... je n'ai trouvé aucun autre moyen de vérifier quand une image a été chargée.

4
vsync

L'utilisation de la fonction jQuery sur ('charger') est la bonne façon de vérifier si l'image est chargée. Mais sachez que la fonction on ('load') ne fonctionnera pas si l'image est déjà dans le cache.

var myImage = $('#image_id');
//check if the image is already on cache
if(myImage.prop('complete')){ 
     //codes here
}else{
     /* Call the codes/function after the image is loaded */
     myImage.on('load',function(){
          //codes here
     });
}
4
jroi_web

C'est simple avec jquery:

$('img').load(function(){
   //do something
});

Si essayé avec:

$('tag')html().promise().done(function(){ 
   //do something
}) ;

mais cela ne vérifiera pas si l'image est chargée. Ce feu est fait si le code est chargé. Sinon, vous pouvez vérifier si le code a été fait, puis déclencher la fonction de chargement img et vérifier si l'image est vraiment chargée. Nous faisons donc une combinaison des deux:

$('tag')html('<img src="'+pic+'" />').promise().done(function(){ 
   $('img').load(function(){
     //do something like show fadein etc...
   });
}) ;
1
Swen

Je pense que cela peut vous aider un peu:

    $('img').error(function(){
        $(this).attr( src : 'no_img.png');
 })

Donc, s'il est chargé - sera affiché l'image d'origine. Dans l'autre - sera affiché l'image, qui contient un fait avec une image en panne ou un en-tête HTTP 404.

0
Roman Kozin