2

试图理解下面的代码，因为我想对其进行一些自定义。根据评论，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;
};
4

3 回答 3

3

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

您可以阅读这部分代码：

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

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

于 2011-06-02T05:29:28.843 回答
2

以下行可以解决问题

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

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

于 2011-06-02T05:30:08.827 回答
1

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

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；如果满足这两个条件，这几乎意味着它是集合中最后一个触发加载事件的元素，那么回调函数将触发。

于 2011-06-02T05:33:13.423 回答