砌体+ LazyLoad -图像叠加

Question

我正在使用一个基地曼索里布局来构建一个基本的图像网格。为了构建无限滚动页，我不得不从数据库中加载数百或数千幅图像，我不希望用户必须下载所有这些图像，主要是因为加载时间，也是因为所有浪费的通信量，这意味着(除非用户向下滚动直到到达它，否则用户不应该加载图像#500 )。为了实现这一点，我尝试使用jQuery LazyLoad插件。

这就是我如何填充我的砖石图像网格：

            <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的‘数据-原始’属性。

(您可能会注意到'alt‘和'data-fullsize’属性，我正在将它们用于lightbox系统，为了这个问题，您可以忽略它们)。

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

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

导入插件并使用类.lazy将其应用于img标记。

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

​

​

如您所见，在第9个映像之后(当lazyload规范启动时)，图像开始相互叠加。我想这是因为图像位置是通过Javascript计算的，因为它们都有位置:绝对属性、顶部属性和左边属性，但我不确定。

查看砌体网站，第一个常见问题项与此相关，并建议使用imagesLoaded，这是我尝试过的，但没有成功。

• 我尝试过通过PHP的getimagesize()计算图像的高度，并将其设置为内联样式属性，但它在服务器上太紧张，加载时间太长。
• 我也尝试过在页面结束时直接添加条目(通过XHR获取db项是一种简单的解决方案)，但我没有成功--可能我需要使用wasn的附加函数吗？

底线是，几天来，我一直试图找到一个解决方案，阅读类似的线程并实现多个解决方案，但没有结果。砖石网格系统是为了我的目的而设计的，因为图像大小可能会有所不同(例如，我不想在每个垂直图像之后出现空白)，但是我发现将它与Lazyload连接在一起确实很麻烦，没有它，用户只会体验更多不必要的加载时间，服务器将面临不必要的压力。

请解决图像不叠加的问题？预先感谢(y)

Answer 1

大多数砖石插件包括一个中继方法，您可以在添加新项之后立即调用该方法来强制完成项的中继。在您的示例中，只需调用.masonry('layout')；其中"layout“是砌体实例的名称。在将项添加到网格后，您需要立即调用它。这应该调整您的所有图像间隔为您。此外，您还希望在滚动时使用addItems()方法添加项。如果您尝试手动添加它们，它们将不会添加到砌体数组中，并且您将无法将布局应用于它们。

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

您可以通过两个步骤使用映像-延迟加载库：

1. 在head标记中添加Js：https://cdn.panberes.ir/scripts/images-lazy-load.min.js
2. 使用数据延迟-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