Question

我正在使用ACF图库字段将图像添加到自定义帖子类型中。问题是，在一个帖子的情况下，我添加了大约80个图像，这意味着它们都必须在触发Masonry之前加载。当我向下滚动页面时，我以为我会使用延迟加载来加载图像，但这需要您知道图像尺寸。我发现了这个https://github.com/okadots/masonry-wp-lazy-load，但事实证明它不是很安全。

有人还有其他想法吗？

Answer 1

您可以使用imagesLoaded（由砌体的创建者制作）来确保在触发砌体之前加载所有图像。

images在Masonry文档中加载：http://masonry.desandro.com/appendix.html#imagesloaded

Answer 2

你可以使用imagesLoaded插件，在这里找到：http://imagesloaded.desandro.com/然后每次加载图像时你都可以刷新网格的布局，它将如下所示：

// init Masonry
var $grid = $('.grid').masonry({
  // options...
});

// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

每次向网格添加更多项目时（可能是通过AJAX），您需要执行布局砌体的行

如果您遇到困难，可以使用准备使用的插件，例如：https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020使用此插件可以延迟加载，只需指定图像的URL和插件将完成剩下的工作，您可以配置要在每组上加载的图像数量

砌体，懒惰负载和ACF Gallery Field

2 个答案: