Images loaded after Packery can throw off the layout – so use ImagesLoaded

I was having an issue with the first image in a packery id container shifting up and down as I resized the browser window. The fix I found was to load all images first then Packery, and it has a sweet documentation page describing two ways to do this, but I used imagesLoaded:

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

Or the jQuery way:

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

Here’s how I installed it (first go get ImagesLoaded js) and replace () for <> around the script tags in the code (I had to use parens so the code would show on this post):


(script src="/static/javascripts/vendor/packery.pkgd.js")(/script)
(script src="/static/javascripts/vendor/imagesloaded.pkgd.js")(/script)
(script)
var container = document.querySelector('#packeryContainer');
var $pckry;
var $pckry = new Packery( container, {
// options
itemSelector: '.jsp-item',
stamp: '.packery-stamp',
gutter: 0,
});
// initialize Packery after all images have loaded
imagesLoaded( container, function() {
$pckry = new Packery( container );
});
(/script)


Tags:
front end web development