lazy-loading - 砌体、延迟加载和 ACF 画廊场

Question

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

有人有其他想法吗？

Answer 1

您可以使用类似imagesLoaded（由 Masonry 的创建者制作）之类的东西来确保在触发 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，其余的由插件完成，您可以配置每组要加载的图片数量