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 class 添加到其他图像，并将 'src' 属性替换为 Lazyload 的 'data-original'.

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

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

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

正在导入插件并将其应用到带有 class .lazy.

的 img 标签

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

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

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

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

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

请问图片不重叠的解决办法？提前致谢 (y)

Answer 1

在您的图片完全加载之前，您的砌体正在加载。运行你的 .lazyload 里面

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

Answer 2

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

Answer 3

您可以使用 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 使用这个插件你可以很容易地指定项目之间的 space，每个分辨率的列数等等，它还具有添加过滤器、排序和搜索字段的能力

Answer 4

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

在head标签中添加Js库： https://cdn.panberes.ir/scripts/images-lazy-load.min.js
添加所有带有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

Masonry + LazyLoad - 图像叠加

Masonry + LazyLoad - Images Overlaying

html

javascript

css

jquery-masonry

masonry