Layout fails on reload

[metafizzy]

Layout fails on reload

[desandro]

Try using imagesLoaded. See http://packery.metafizzy.co/appendix.html

[alexmorris]

Not sure that'd be it. The issue happens when images are already cached. Happens locally too.

[kokarn]

I had similar problems even with imagesLoaded.

I fixed the problem by doing the layout on window load instead of document ready so that every resource is loaded, even fonts and such.

[alexmorris]

ahh cool - can you point me at an example?

[kokarn]

Can't really link to the project as it in production, but the code we ended up using is this

$( window ).load(function(){
   var $content = $( '#content' );
   $content.packery({
        itemSelector : '.post-wrapper',
        columnWidth : 300,
        gutter: 20
   });
});

[desandro]

Good news is that imagesLoaded is getting a rewrite and cached images should be resolved. See desandro/imagesloaded#65 . Expect imagesLoaded v3 out in the next 10 days.

[alexmorris]

For now the window.load technique works fine with webfonts and cached images.

    <script>
        (function ($) {
            $(window).load(function () {
                var $container = $('#content');
                // initialize
                $container.packery({
                  itemSelector: '.item',
                  columnWidth: '.grid-sizer'
                });
            });
        }(jQuery));

    </script>

[RyGa]

How do you specify packery options (like itemSelector, transitionDuration etc) whilst using the imagesloaded method?

I saw this, but not sure how i add in my options..

var container = document.querySelector('#container');
var pckry;
// initialize Packery after all images have loaded
imagesLoaded( container, function() {
pckry = new Packery( container );
});

[desandro]

@RyGa

var container = document.querySelector('#container');
var pckry;
// initialize Packery after all images have loaded
imagesLoaded( container, function() {
  pckry = new Packery( container, {
    // options...
    itemSelector: '.item',
    transitionDuration: '0.8s'
  });
});

[RyGa]

Thank you this works fine, and fixes packery not sizing container properly when images have not been downloaded yet.

Although must we use document.querySelector('#container'); ?
I tried jq method: var container = $('#container');
it gives error: Bad packery element: [object Object]

works fine using document.queryselector though, just wondering is all.

[desandro]

If you're using jQuery, you can do it like so:

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

// initialize Packery after all images have loaded
$container.imagesLoaded( function() {
  $container.packery({
    // options...
    itemSelector: '.item',
    transitionDuration: '0.8s'
  });
});

I would like to refresh the window size for packery. I have a click event that does display:none;. On this click I want packery to refresh. I have tried $(window).resize(); but with no luck. Are there any events in packery that call to refresh?