jQuery Masonry callback not working

Question

I am trying to get a callback function to execute when jQuery Masonry has done its positioning magic, preventing a flash of unstyled content in my code.

For the purpose of testing, though, I am using a simple alert that isn't called at all.

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

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

I may be missing something obvious, but any help would be appreciated

score 14 · Answer 1 · answered Aug 08 '12 at 17:02

14

It looks like Masonry works with jQuery's deferred objects system. If you're using jQuery 1.5+ this might work:

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

answered Aug 08 '12 at 17:02

Anthony Veach

320
2
10

Thank you so much for this answer - I've been looking for this line of code for about an hour at this point. I wish I could up this x10. Cheers. – MikeZ Dec 13 '14 at 01:24

desandro · Accepted Answer · 2011-11-30T20:07:36.673

3

Callbacks with Masonry v2.0 are undocumented and not quite supported.

But callbacks are awesome with Isotope v1.5! If you want proper callbacks that trigger after the end of a transition or animation, Isotope is the way to go.

The reason being is that you might be using CSS transitions or jQuery animation or neither. So I'd need to build in all the logic to detect which one is being used and then when to trigger the actual callback.

edited Nov 30 '11 at 20:07

answered Jun 06 '11 at 14:51

desandro

2,854
1
22
31

... oh I have now masked Masonry with an image until it's loaded. Not ideal but good enough. Thanks – Craig Jun 08 '11 at 15:33
1

Desandro, first, thanks for a great plugin! Do you have any workarounds currently for this issue? I'm experiencing the same thing. – Paul Erdos Nov 30 '11 at 02:50

score 1 · Answer 3 · edited Jun 01 '12 at 08:17

1

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

edited Jun 01 '12 at 08:17

Martijn Pieters

1,048,767
296
4,058
3,343

answered Jun 01 '12 at 08:11

tatatata

11
1

score 0 · Answer 4 · edited May 05 '13 at 03:07

0

I tried this and it worked

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

edited May 05 '13 at 03:07

Edward Falk

9,991
11
77
112

answered May 05 '13 at 02:51

BlackEagle

37
4

jQuery Masonry callback not working

4 Answers4

Linked