Пожалуйста, объясните этот код - PullRequest
Новая
       10

Пожалуйста, объясните этот код

2 голосов
/ 02 июня 2011

Пытаюсь разобраться в коде ниже , так как я хочу немного его настроить.Согласно комментариям, 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;
};

Ответы [ 3 ]

3 голосов
/ 02 июня 2011

Функция обратного вызова вызывается, только если len (уменьшено) меньше или равно нулю.Поскольку он начинается со значения длины элементов (или их количества) и уменьшается при загрузке каждого изображения, только последнее изображение сделает выражение истинным.

Вы можете сортироватьпрочитайте эту часть кода: 

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

как «привязать эту функцию к методу загрузки для каждого элемента в элементах».Таким образом, каждый элемент вызывает функцию при загрузке, поэтому вызывается функция () {...}.Первое изображение уменьшает len, а затем проверяет, меньше или равно 0, затем следующий элемент делает то же самое, когда завершает загрузку, и так далее, пока последнее изображение не уменьшает len, а затем проверяет, меньше ли оно 0. Так какэто последнее изображение, оно возвращает true, и если src не пустое, оно запускает callback.call ().

2 голосов
/ 02 июня 2011

Следующая строка делает трюк 

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

По сути, событие загрузки прикрепляется к каждому тегу img, и если загрузка запущена, переменная len будет уменьшена, а если len <= 0, будет выполнен обратный вызов. Само событие load будет вызвано функцией each(), которая заменяет изображения.

1 голос
/ 02 июня 2011

Оценка для стрельбы по последнему элементу и результирующего вызова функции обратного вызова находится здесь 

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

Обратите внимание, что каждый элемент в элементах привязан к событию load - код для этого: 

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

Таким образом, по сути, это означает, что при загрузке изображения оно будет уменьшать значение переменной len (--len) и проверять, меньше или равно нулю, и убедиться, что у этого элемента есть src; если оба эти условия выполнены, что в значительной степени должно означать, что это последний элемент в наборе для запуска события load, тогда вызовется функция обратного вызова.

...