S'il vous plaît expliquer ce code

Question

Essayer de donner un sens à la code below, comme je veux le personnaliser un peu. Selon les commentaires, le callback function is passed the last image to load as an argument. Quelqu'un peut-il s'il vous plaît expliquer comment le rappel est passé seulement à la dernière image (je comprends pourquoi, je ne sais tout simplement pas comment)? De la façon dont je lis le code, il semble que ce soit transmis à tous.

Cheers.

// $('img.photo',this).imagesLoaded(myFunction) 
// execute a callback when all images have loaded. 
// needed because .load() doesn't work on cached images 

// mit license. paul irish. 2010. 
// webkit fix from Oren Solomianik. thx! 

// callback function is passed the last image to load 
// as an argument, and the collection as 'this' 


$.fn.imagesLoaded = function(callback){ 
    var elems = this.filter('img'), 
     len = elems.length, 
     blank = 'data:image/gif;base64,' + 
      'R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='; 

    elems.bind('load',function(){ 
     if (--len <= 0 && this.src !== blank){ callback.call(elems,this); } 
    }).each(function(){ 
    // cached images don't fire load sometimes, so we reset src. 
    if (this.complete || this.complete === undefined){ 
     var src = this.src; 
     // webkit hack from 
     // groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f 
     // data uri bypasses webkit log warning (thx doug jones) 
     this.src = blank; 
     this.src = src; 
    } 
    }); 

    return this; 
}; 

Answer 1

La fonction de rappel est appelée uniquement si len (décrémentée) est inférieure ou égale à zéro. Comme il commence avec la valeur de la longueur des éléments (ou combien il y en a), et qu'il est décrémenté lorsque chaque image est chargée, seule la dernière image rendra l'expression vraie.

Vous pouvez lire cette sorte de partie du code:

elems.bind('load',function(){ 
     if (--len <= 0 && this.src !== blank){ callback.call(elems,this); } 
    }) 

comme « lier cette fonction à la méthode de charge pour chaque élément elems. » Ainsi, chaque élément appelle la fonction quand il est chargé, ainsi la fonction() {...} est appelée. La première image décrémente len puis vérifie si elle est inférieure ou égale à 0, alors l'élément suivant fait de même quand son chargement est fait, et ainsi de suite jusqu'à ce que la dernière image décrémente len puis vérifie si elle est inférieure à 0. Depuis c'est la dernière image, elle renvoie true et si le src n'est pas vide, il lance callback.call().

Answer 2

La ligne suivante fait le tour

if (--len <= 0 && this.src !== blank){ callback.call(elems,this); } 

Fondamentalement, l'événement de chargement est attaché à chaque étiquette img, et si la charge est tiré de la variable len sera décrémenté et si len <= 0 le rappel sera exécuté. L'événement load lui-même sera déclenché par la fonction each() qui remplace les images.

Answer 3

L'évaluation pour tirer le dernier élément et résultant appel à la func de rappel se trouve ici

if (--len <= 0 && this.src !== blank){ callback.call(elems,this); } 

Notez qu'il est lié à chaque élément elems, pour déclencher l'événement load - la code pour le faire est:

elems.bind('load',function(){ //.. Basically binds the following function to every item in elemns on load. 

donc, en gros, cela signifie que lorsqu'un chargement de l'image, il va de-incrément de la variable len (--len) et vérifier si c'est inférieur ou égal à zéro, et assurez-vous que ce l'élément a un src; Si ces deux conditions sont remplies, ce qui signifie que c'est le dernier élément de l'ensemble à déclencher l'événement de chargement, la fonction de rappel se déclenchera.