Masonry + LazyLoad - 图像叠加

Question

我正在使用base Mansory layout 来构建基本图像网格。必须从数据库中加载数百或数千张图像以希望构建无限滚动页面，我不希望用户必须下载所有图像，主要是因为加载时间，但也因为所有浪费的流量意味着（用户不应该加载图像#500，除非他向下滚动直到到达它）。 为了实现这一点，我尝试使用 jQuery LazyLoad 插件。

这就是我填充 Masonry 图像网格的方式：

            <ul class="grid effect-3" id="grid">
            <?php
            for ($i = 0; $i < count($thumbArray); $i++) {
                if ($i < 9) {
                    echo '<li><img class="img-grid" alt="' . $descArray[$i] . '" data-fullsize="' . $imgArray[$i] . '" src="' . $thumbArray[$i] . '"></li>';
                } else {
                    echo '<li><img class="img-grid lazy" alt="' . $descArray[$i] . '" data-fullsize="' . $imgArray[$i] . '" data-original="' . $thumbArray[$i] . '"></li>';
                }

            }
            ?>
        </ul>

基本上预先加载前 9 张图片，并在其他图片中添加 'lazy' CSS 类，以及将 'src' 属性替换为 Lazyload 的 'data-original'。

（您可能会注意到“alt”和“data-fullsize”属性，我将它们用于灯箱系统，出于本问题的目的，您可以忽略它们）。

在 index.php 脚本的末尾我有：

<script src="js/jquery.lazyload.js"></script>
<script>$("img.lazy").lazyload();</script>

导入插件并将其应用于带有 .lazy 类的 img 标签。

问题在于，我假设由于不知道图像的高度，Masonry 网格系统会覆盖通过 Lazyload 进程加载的任何图像：

如您所见，在第 9 张图像之后（延迟加载规范开始时），图像开始相互叠加。我想这是因为图像位置是通过 Javascript 动态计算的，因为它们都设置了 position:absolute 和 top 和 left 属性，但我不确定。

查看Masonry网站，第一个FAQ item与此有关，并建议使用imagesLoaded，我尝试过但没有成功。

• 我已尝试通过 PHP 的 getimagesize() 计算图像的高度并将其设置为内联样式属性，但它在服务器上过于密集且加载时间过长。
• 我也尝试过在到达页面末尾时动态添加项目（通过 XHR 获取 db 项目将是一个简单的解决方案）但我没有成功 - 可能我需要为此使用 Masonry 的附加功能？

底线是，几天来我一直在尝试寻找解决方案，现在阅读了类似的线程并实施了多种解决方案，但无济于事。 Masonry 网格系统是出于我的目的而指示的，因为图像大小可能会有所不同（例如，我不希望在每个垂直图像之后都有间隙），但我真的发现将它与 Lazyload 结合起来很麻烦，没有它，用户只会体验超过必要的加载时间，服务器将承受不必要的压力。

请解决图像不重叠的问题？提前致谢（y）

Answer 1

您可以通过 2 个步骤使用 images-lazy-load 库：

1. 在 head 标签中添加 Js 库： https://cdn.panberes.ir/scripts/images-lazy-load.min.js

2. 用data-lazy-src添加所有img标签资源（src属性）

<a href="http://www.partonet.ir">
<img class="footer-logo" width="200" height="73" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-src="http://www.partonet.ir/images/1397/09/21/sabeghe.jpg" alt="office automation" title="office automation">
</a>

查看示例：https://www.panberes.ir

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 使用此插件，您可以非常轻松地指定项目之间的空间、每个分辨率的列数，以及此外，它还具有添加过滤器、排序和搜索字段的功能

Answer 3

您的砌体在您的图像完全加载之前加载。在

中运行你的 .lazyload

$(window).on('load', function(){
  code here.
}

Answer 4

大多数砌体插件都包含一个重新布局方法，您可以在添加新项目后立即调用该方法以强制完成项目重新布局。在你的情况下，你应该只需要调用 .masonry('layout');其中“布局”是您的砌体实例的名称。将项目添加到网格后，您需要立即调用它。这应该为您调整所有图像间距。此外，您将希望使用 addItems() 方法在滚动时添加项目。如果您尝试手动添加它们，它们将不会被添加到 Masonry 数组中，并且您将无法对其应用布局。