Search code examples
jquerycallbackjquery-callbackjquery-masonryfouc

jQuery Masonry callback not working


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


Solution

  • 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.