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); }
  })

「この関数を要素の各要素のloadメソッドにバインドします。」したがって、各要素はロード時に関数を呼び出すため、関数（）{...}が呼び出されます。最初の画像は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); }

基本的に、loadイベントは各imgタグに付加され、loadが発生すると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 に答える