Question

I have a slight dilemma on exactly how to accomplish something. I am coding a portfolio which has a masonry layout using a plugin called isotope. It’s basically pinterest style layout. I will also have filters that will automatically grab the right content from the database and insert it with a mustache template. Now the problem I have is how do I wait for all the dom insertion to finish before I run the isotopes relay-out function. Because if I run it too soon the elements won’t get positioned properly. I dont want to do a setTimeout() function because Im not sure how long the database request will take and I dont want to make the user wait too long.

Any suggestions?

Answer 1

You can call relayOut method in the callback of insert function.

$('#container').isotope( 'insert', /*items*/ ,function(){
  $('#container').isotope( 'reLayout', callback );
} );

Or you can give all method as chain

$('#container').isotope( 'insert', /*items*/).isotope( 'reLayout', callback );

If you are calling your content using ajax you can call your relayOut on the last line of success callback of jquery ajax. So every DOM manipulation is done before you call relayOut method.

refer to http://isotope.metafizzy.co/docs/methods.html for callback and chaining method of isotope plugin.
for jquery ajax go through http://api.jquery.com/jQuery.ajax/