Comment savoir si une image est chargée ou mise en cache dans JQuery?

Question

Semble que la fonction .load() ne se déclenche pas si l'image a déjà été mise en cache. Donc, si vous voulez vous assurer une des images est chargé avant de charger et d'afficher une autre (à savoir Magnifier) ​​vous ne pouvez pas faire quelque chose comme:

$(img_to_load_first) 
    .load(
     $(img_to_load_last) 
      .src("2nd.png"); 
    ) 
    .src("1st.png"); 

Alors comment assurer l'ordre de chargement dans JQuery?

Answer 1

Ce que vous aurez à faire est de gérer vos liaisons de charge de manière sélective. Vous pouvez vérifier la charge en testant la propriété de l'objet Image complete.

Par exemple:

$('.load_selector').each(function(){ 

    if (!this.complete) { 
     $(this).load(function(){ 
      // handle image load event binding here 
     }); 
    } else { 
     // handle image already loaded case 
    } 

}); 

On notera que ci-dessus, this (utilisé seul) se réfère à la référence DOM à l'objet de l'image fournie par jQuery.

Answer 2

Merci Sparkey,

Je vais donner que l'essayer, mais il semble bon. J'ai trouvé une discussion approfondie sur le sujet ici: http://www.bennadel.com/blog/1007-jQuery-Attr-Function-Doesn-t-Work-With-IMAGE-complete.htm

qui me conduit à la "jQuery 'onImagesLoad' Plugin" ici: http://includes.cirkuit.net/includes/js/jquery/plugins/onImagesLoad/1.1/documentation/

qui semble résoudre la question comme ceci:

$imgs.each(function(i, val){ 
    $(this).bind('load', function(){ 
     // ... 
    }).each(function(){ 
     if (this.complete || this.complete === undefined){ this.src = this.src; } //needed for potential cached images 
    }); 
}); 

Ce qui se résume à peu près à ce que vous avez dit, seulement son chèque complété aussi tester pour "indéfini".

Answer 3

Si vous voulez envelopper toutes ces fonctionnalités dans une méthode d'extension jQuery, essayez ceci (qui devrait travailler en attente pour un certain nombre d'images):

$.fn.imagesLoaded = function() { 
    var def = $.Deferred(); 
    var count = this.length; 
    this.each(function() { 
     if (this.complete) { 
      if (!--count) { 
       def.resolve(); 
      } 
     } else { 
      $(this).load(function() { 
       if (!--count) { 
        def.resolve(); 
       } 
      }); 
     } 
    }); 
    return def.promise(); 
} 

puis utilisez simplement comme ceci:

$(img_to_load_first).imagesLoaded().done(function() { 
    $(img_to_load_last).src("2nd.png"); 
}); 

Answer 4

Vous pouvez également vérifier si votre image a une largeur ou une hauteur pour détecter si elle a déjà été chargée.

Par exemple:

var img = _content.find('img'); 
    if(img[0].width >0 || img[0].height > 0) { 
    console.log('already loaded image'); 
    } else { 
    img.on('load', function() { 
    console.log('image loaded'); 
    }); 
}