Question

尝试理解code below，因为我想稍微自定义它。根据评论，callback function is passed the last image to load as an argument。有人可以解释回调如何通过仅传递到最后一张图片（我理解为什么，我只是不知道如何）？从我正在阅读代码的方式来看，它似乎传递给了所有代码。

干杯。

// $('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（递减）小于或等于零时才调用回调函数。因为它以元素长度的值（或者有多少）开始，并且在加载每个图像时递减，所以只有最后一个图像才能使表达式成为真。

您可以阅读这部分代码：

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

as“将此函数绑定到elems中每个元素的load方法。”因此，每个元素在加载时调用该函数，因此调用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 <= 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）进行递减并检查是否小于或等于零，并确保该元素具有src;如果满足这两个条件，这几乎意味着它是触发加载事件的集合中的最后一个元素，那么回调函数将会触发。

请解释一下这段代码

3 个答案: