jQuery Masonry Callback funktioniert nicht

Question

Ich versuche, eine Callback-Funktion auszuführen, wenn jQuery Masonry seine Positionierung Magie getan hat, verhindert einen Blitz von unstyled Inhalt in meinem Code.

Zu Testzwecken verwende ich jedoch eine einfache Meldung, die überhaupt nicht aufgerufen wird.

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

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

Vielleicht übersehe ich etwas Offensichtliches, aber ich wäre für jede Hilfe dankbar

Answer 1

Es sieht so aus, als ob Masonry mit dem Deferred Objects System von jQuery arbeitet. Wenn Sie jQuery 1.5+ verwenden, könnte dies funktionieren:

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

Answer 2

Rückrufe mit Masonry v2.0 sind undokumentiert und werden nicht vollständig unterstützt.

Aber Rückrufe sind großartig mit Isotop v1.5! Wenn Sie richtige Rückrufe, die nach dem Ende eines Übergangs oder einer Animation auslösen wollen, ist Isotope der Weg zu gehen.

Der Grund dafür ist, dass Sie entweder CSS-Übergänge oder jQuery-Animationen oder beides verwenden. Ich müsste also die gesamte Logik einbauen, um zu erkennen, welche verwendet wird und wann der eigentliche Rückruf ausgelöst werden soll.

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

Ich habe das ausprobiert und es hat funktioniert

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