在 WordPress 中加载每个图像后触发 Masonry

Question

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

到目前为止，我使用的代码如下，用于砌体运行：

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

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

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

     });
  });

我确定这是可能的，有人可以帮忙吗？

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',
  });
});