Question

我有一个在WordPress中工作的砌体用于我创建的页面，其中有大约20个图像加载然后触发砌体。看起来很完美，除了连接速度很慢之外，它会加载所有20多张图片，然后再对它们进行网格划分。理想情况下，我希望砌砖在每张照片之后触发，就像正在建造墙壁一样。我确信它可以完成，但我无法让它发挥作用。

我到目前为止使用的代码如下所示，以便运行的砌体是：

  imagesLoaded().progress( container, function() {
     msnry = new Masonry( container, {
        itemSelector: '.ms-item',

     });
  });

然后，我一直在尝试以下方法让它在每张图片后加载，但它不起作用，

{{1}}

我确定它有可能，有人可以帮忙吗？

Answer 1

您可以在页面完全加载时执行代码，包括使用$( window ).load()的图像。

$( window ).load(function() {

  var container = document.querySelector('#ms-container');
  var msnry = new Masonry( container, {
    itemSelector: '.ms-item',
    columnWidth: '.ms-item',
  });
});

修改

在加载每张图片后触发事件

$('img').on('load', function(){ var container = document.querySelector('#ms-container'); var msnry = new Masonry( container, { itemSelector: '.ms-item', columnWidth: '.ms-item', }); });

在WordPress中每次加载图像后触发砌体

1 个答案: