0

我让 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',

     });
  });

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

4

1 回答 1

0

您可以在页面完全加载时执行代码，包括使用$( 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',
  });
});
于 2016-07-02T20:00:35.300 回答