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

8th January 2014
Back to Blog

Packery load error

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:

Nathaniel Flick

I'm a Front End Web Developer passionate about usability. My primary specialties are HTML5, CSS3, SCSS, LESS, and jQuery and I am very familiar with Foundation and Bootstrap frameworks. I've worked on top of and with WordPress, Shopify, Rails, Python, and ASP.net/Umbraco frameworks.

5 thoughts on “Images loaded after Packery can throw off the layout – so use ImagesLoaded”

    1. Hi, go to the link I posted in the article for implementation documentation. Basically you need the images loaded js and wrap that around the packery load. I’ll find an example and post it to the article.

        1. Hi Christoffer, I updated this post with a code example. First 1. Load packery and imagesloaded js files 2. call packery with a callback to imagesloaded which makes packery wait till images are loaded.

          1. Thank you for taking the time!!! im not shure which parts i shuld change to make it fit my own site. I have tried changing: #packeryContainer to #content but it doesent seem to work?

Leave a Reply to Christoffer Cancel reply

Your email address will not be published. Required fields are marked *