Packery and imagesLoaded plugin not working?

江枫思渺然 提交于 2019-12-25 04:06:10

问题


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.


回答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();
    });

});


来源:https://stackoverflow.com/questions/26335347/packery-and-imagesloaded-plugin-not-working

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!