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

Question

我在WordPress中有一个我正在创建的页面，其中有大约20个图像加载，然后砌体被触发。看起来很完美，除了连接速度慢之外，它加载了所有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',
  });
});