Question

我正在使用base Mansory layout来构建基本图像网格。为了构建一个无限的滚动页面，我不得不从数据库加载数百或数千个图像，我不希望用户必须下载所有这些，主要是因为加载时间，但也因为所有浪费的流量意思是（用户不应该加载＃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个图像，并将“懒惰”CSS类添加到其他图像中，并用Lazyload的'data-original'替换'src'属性。

（你可能会注意到'alt'和'data-fullsize'属性，我将它们用于灯箱系统，你可以为了这个问题而忽略它们。）

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

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

导入插件并将其应用于类.lazy。

的img标签

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

如您所见，在第9张图像（延迟加载规范开始后）之后，图像开始相互重叠。我想这是因为图像位置是通过Javascript进行动态计算的，因为它们都有位置：绝对和左右属性设置，但我不确定。

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

我尝试通过PHP的getimagesize（）计算图像的高度，并将其设置为内联样式属性，但它在服务器上太强烈，加载时间太长。
我还尝试在达到页面结尾时以dinamically方式添加项目（通过XHR获取数据库项目将是一个简单的解决方案）但我没有成功 - 可能我需要使用Masonry的追加功能吗？< / LI>

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

请勿覆盖图片的解决方案？在此先感谢（y）

Answer 1

您可以使用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 2

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

Answer 3

在图像完全装入之前，您的石工正在加载。在

中运行.lazyload

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

Answer 4

您可以通过两个步骤使用images-lazy-load lib：

在head标签中添加Js lib： 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 - 覆盖

4 个答案: