Packery and imagesLoaded plugin not working?

Question

I'm using Packery on a website and have downloaded imagesLoaded, but still my images overlap on page load. The website can be seen here and my code is as below:

$(document).ready(function() {
var $container = $container.packery({
   itemSelector: "packery-item"
});
$container.imagesLoaded( function() {
   container.packery();
});
});

Any help would be greatly appreciated.

EDIT: The html code looks like this:

<div class="packery js-packery">

<div class="packery-item item"><img src="imgs/cdg5.jpg"></img></div>
<div class="packery-item text"><img src="imgs/text1.png"></img></div>
<div class="packery-item item w2"><img src="imgs/cdg3.jpg"></img></div>
<div class="packery-item gif"><img src="imgs/gif1.gif"></img></div>

</div>

etc.

Could you include your html code? I have had the same problem because of images in my tiles. — Jerodev, Oct 13 '14 at 08:02

Jerodev · Accepted Answer · 2014-10-13T09:10:56.430

1

The problem is that packery is executed before the images in your items are loaded. Because of that Packery can not know how high the element will have to be.

A solution for this is to check with jquery if all images are loaded and then execute Packery. I have found several ways to do this, the solution here seems like a good one.

Another way to fix this is to give the images a fixed height in css or with an height attribute. However, you can only do this when the images have the same height or when you know the height in advance.

Update: This is an example code for the first solution:

$(document).ready(function(){

    var cnt = $("img").length;
    $("img").one("load", function() {
        cnt--;

        // If all images are loaded, init Packery
        if (cnt === 0)
        {
            $(".js-packery").packery({
               itemSelector: "packery-item"
            });
        }

    }).each(function() {
      if(this.complete) $(this).load();
    });

});

edited Oct 13 '14 at 09:10

answered Oct 13 '14 at 08:29

Jerodev

32,252
11
87
108

Sorry to ask, but exactly where would the callback go within the current jQuery code? – user3606785 Oct 13 '14 at 08:40
In your document ready you should put a loop that checks all the images. If all those images are loaded, initialize Packery. I have added an example code. – Jerodev Oct 13 '14 at 08:42
I really appreciate your help, but it doesn't seem to work for my browsers? – user3606785 Oct 13 '14 at 08:56
Line 12: "Uncaught TypeError: Cannot read property 'packery' of undefined" – user3606785 Oct 13 '14 at 08:58
You need to set the variable `$container` to your container element before using the variable. I have edited my code. – Jerodev Oct 13 '14 at 09:07
You're incredible! Thank you so much :^] – user3606785 Oct 13 '14 at 09:15

Packery and imagesLoaded plugin not working?

1 Answers1

Linked