Question

我在网站上使用Packery并已下载imagesLoaded，但我的图片仍然在页面加载时重叠。该网站可以看到here，我的代码如下：

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

非常感谢任何帮助。

编辑： html代码如下所示：

<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>

等

Answer 1

问题是在加载项目中的图像之前执行打包。因为Packery不知道该元素有多高。

对此的解决方案是使用jquery检查是否已加载所有图像，然后执行Packery。我找到了几种方法，解决方案here似乎很好。

解决此问题的另一种方法是在css或高度属性中为图像提供固定高度。但是，只有在图像具有相同高度或提前知道高度时才能执行此操作。

<强>更新这是第一个解决方案的示例代码：

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

});

Packery和imagesLoaded插件无法正常工作？

1 个答案: