CODEWITHSUNDEEP
jquerycallbackjquery-masonry
Peter J Harrison
Peter J Harrison

Reputation: 651

jQuery masonry how to call layoutComplete

I have the following function:

namespace.utils.pageReorder(feed, function() {
     console.log('complete');
     // do some stuff here no reorder has completed
});

-------------

pageReorder: function(feed, callback) {

    feed.masonry('reloadItems');
    feed.masonry('layout');

    callback();

},

What i need to be able to do is to only call the callback once the masonry layout has completed. I know masonry has the following method but im not sure how to integrate it into my function.

msnry.on( 'layoutComplete', function() {
  console.log('layout is complete, just once');
  return true;
});

Thanks Pete

Upvotes: 2

Views: 4167

Answers (2)

Neil Woods
Neil Woods

Reputation: 123

I found it working most reliable when registering the event listener before layouting.

Assuming feed is a jquery element:

feed.masonry({
  isInitLayout: false,
  transitionDuration: 0,});
var msnry = feed.data('masonry');

msnry.on( 'layoutComplete', function() {
  console.log('layout is complete, just once');
});
msnry.layout();

Upvotes: 2

0plus1
0plus1

Reputation: 4555

pageReorder: function(feed, callback) {

    feed.masonry('reloadItems');
    feed.masonry('layout');

    feed.on( 'layoutComplete', function() {
       callback();
    });
},

This should work, by experience the layoutComplete of masonry cannot always be trusted.

Upvotes: 2

Related Questions