请解释一下这段代码

Question

尝试理解下面的代码，因为我想对其进行一些自定义。 根据注释，回调函数将最后一个图像作为参数传递给加载。有人可以解释一下回调是如何仅传递到最后一张图像的吗（我理解为什么，我只是不知道如何）？从我阅读代码的方式来看，它似乎已传递给所有人。

干杯。

// $('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

仅当 len（递减）小于或等于 0 时才会调用回调函数。由于它以元素长度的值（或有多少个元素）开始，并且在加载每个图像时递减，因此只有最后一个图像将使表达式为真。

您可以将这部分代码理解

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

为“将此函数绑定到 elems 中每个元素的加载方法”。因此，每个元素在加载时都会调用该函数，因此调用了 function () {...}。第一个图像递减 len，然后检查它是否小于或等于 0，然后下一个元素在加载完成时执行相同的操作，依此类推，直到最后一个图像递减 len，然后检查它是否小于 0。它是最后一个图像，它返回 true，如果 src 不为空，它将运行callback.call()。

Answer 2

下面的行就可以解决这个问题

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

基本上，load 事件附加到每个 img 标签上，如果加载被触发，则 len 变量将递减，如果 len len < ;= 0 回调将被执行。 load 事件本身将由替换图像的 each() 函数触发。

Answer 3

对最后一个元素触发的评估以及对回调函数的调用结果可以在此处找到。

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

请注意，它绑定到 elems 中的每个项目，以在 load 事件上触发 - 执行此操作的代码是：

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

所以基本上，这意味着当加载图像时，它将递减 len 变量 (--len) 并检查它是否小于或等于零，并确保该元素具有源代码；如果这两个条件都满足，这几乎意味着它是集合中触发加载事件的最后一个元素，那么回调函数将触发。