3

I want to hide my content until Masonry has had a chance to style it (to prevent the dreaded flash of unstyled content), and then hide the loader gif . Here is a code snippet:

var $container = $('#deals');

$(window).load(function(){    
    $container.masonry({
        itemSelector : '.deals-wrapper',
        columnWidth : 0,
        isFitWidth: true
    });
},
function() {
    $container.show();
    $('#loader').hide();
});

However, I notice that when .show() is called, Masonry hasn't been applied to the content. I know in this question, the creator of Masonry suggested that there isn't good support for Masonry callbacks right now. Has anyone come up with a decent workaround?

Thanks!

Community
  • 1
  • 1
Paul Erdos
  • 1,355
  • 2
  • 23
  • 47

1 Answers1

2

Maybe you could use css to hide the element as long as its loading. Also there is the .imagesLoaded() function. You can see an example in my recent Question.

Community
  • 1
  • 1
some_guy
  • 206
  • 2
  • 6