Обратный вызов масонства jQuery не работает

Question

Я пытаюсь заставить функцию обратного вызова выполняться, когда jQuery Masonry выполнил свою магию позиционирования, предотвращая вспышку нестандартного содержимого в моем коде.

Однако для целей тестирования я используюпростое предупреждение, которое вообще не вызывается.

var $jigsaw = $('#jigsaw');

$jigsaw.imagesLoaded( function(){
    $jigsaw.masonry({
     columnWidth : 180,
      isAnimated : !Modernizr.csstransitions,
     isResizable : true,
    itemSelector : '.piece'
    }, function(){
        alert('Completed');
    });
});

Возможно, я упускаю что-то очевидное, но любая помощь будет признательна

Answer 1

Похоже, Masonry работает с системой отложенных объектов jQuery.Если вы используете jQuery 1.5+, это может сработать:

$.when($jigsaw.masonry(options)).then(function(){/*callback function*/});

Answer 2

Обратные вызовы с Masonry v2.0 недокументированы и не совсем поддерживаются.

Но обратные вызовы потрясающие с Изотоп v1.5!Если вам нужны правильные обратные вызовы, которые срабатывают после окончания перехода или анимации, то стоит использовать Isotope.

Причина в том, что вы можете использовать переходы CSS или анимацию jQuery или ни то, ни другое.Поэтому мне нужно было встроить всю логику, чтобы определить, какая из них используется, а затем, когда вызывать реальный обратный вызов.

Answer 3

// Create the callback function
var callback = function($el, cb) {
  var instance = $.data($el, 'masonry');
  if (!instance) {
    setTimeout(callback($el, cb), 300);
  } else {
    cb();
  }
}

// Then simply add this to your imagesLoaded for an element of '.thumbnails' or something
callback('.thumbnails', function() {
  // some code goes here
});

Answer 4

Я попробовал это, и это сработало

jQuery.when( $jigsaw.masonry('reload') ).done(function(x) { 
    //call back logic 
});