19

我一直在尝试将砌体和 moo 工具lazyload 拼凑在一起，但是它们似乎都不能很好地结合在一起，尽管这可能只是因为我在编码方面有点无用！

砌体工程在这个页面上。

但是，当我尝试将它与lazyload 放在一起时，它似乎完全搞砸了。有谁知道如何同时实现这两个插件？

我花了 6 天时间试图弄清楚，这是我最后的希望哈！

谢谢

4

6 回答 6

30

最近，我必须为我的一个网站解决这个问题。我已经尝试了几种方法，它似乎工作。

1.第一种方法：

  • 在物品上装载砌体
  • 在所有图像上放置一个占位符并在它们上使用延迟加载
  • 现在，当每个图像触发lazyload.load回调时，重新加载砌体->一系列砌体（'reload'）[用新图像更新了jsfiddle，更容易说明这一点]

http://jsfiddle.net/7vEJM/8/

var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item',
        columnWidth: function(containerWidth){
            return containerWidth / 12;
        }
    });
    $('.item img').addClass('not-loaded');
    $('.item img.not-loaded').lazyload({
        effect: 'fadeIn',
        load: function() {
            // Disable trigger on this image
            $(this).removeClass("not-loaded");
            $container.masonry('reload');
        }
    });
    $('.item img.not-loaded').trigger('scroll');
});

这种方法很好，但也有一个缺点。网格布局可能不会保持不变，因为 masonry.reload() 的时间取决于每个图像的加载时间（即应该首先加载的那个可能只会稍后完成）

2.第二种方法： 看看像pinterest这样的网站，我认为它不遵循第一种方法，因为它们甚至在加载任何图像之前就已经安排了容器框，因此，我试图实现的是只显示具有相同的框比例作为图像。步骤是：

  • 传递您的图像尺寸（只返回一个像 json {image1: [300,400],image2: [400,500]}）
  • 使用 CSS 技巧使 div 框根据容器调整大小。我在这里找到了那个技巧
  • 像往常一样延迟加载，从现在开始不需要触发任何重新加载，没有图像，盒子排列正确

http://jsfiddle.net/nathando/s3KPn/4/

var $container = $('#container');
$container.imagesLoaded(function(){
    $container.masonry({
        itemSelector: '.item',
        columnWidth: function(containerWidth){
            return containerWidth / 12;
        }
    });
    $('.item img').lazyload({
        effect: 'fadeIn'
    });
    $('.item img').trigger('scroll');
});

[编辑为第二种方法添加jsfiddle]

注意：

  • 在这个小提琴中，我手动将每个图像的高度/宽度比放入 'padding-bottom: xxx%' 中，这应该从您的服务器代码中传入（请参阅步骤 1）
  • 在边框中添加以使框可见
  • 为了说明即使未加载图像也会排列这些框，请尝试取消注释并/*display: none */ 评论display: block#container.fluid .item img

干杯

于 2013-05-03T15:51:56.193 回答
9

我在其他相同问题的文章上发布了相同的答案。如果您有问题图像重叠，我在下面的网站上找到了解决方案，虽然它是日文的。

http://www.webdesignleaves.com/wp/jquery/1340/

希望这会有所帮助。

重点是使用以下；

$('img.lazy').load(function(){ ... })

HTML

<div id="works_list">
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/001.jpg" alt="">
<p>title 1</p>  
</div><!-- end of .work_item-->
<div class="work_item">
<img class="lazy" src="images/dummy.gif" data-original="images/works/thumb/002.jpg" alt="">
<p>title 2</p>  
</div><!-- end of .work_item-->
 ....
</div><!-- end of #works_list -->

jQuery

$("img.lazy").lazyload({
    effect: 'fadeIn',
    effectspeed: 1000,
    threshold: 200
});

$('img.lazy').load(function() {
    masonry_update();
});

function masonry_update() {     
    var $works_list = $('#works_list');
    $works_list.imagesLoaded(function(){
        $works_list.masonry({
            itemSelector: '.work_item',　
            isFitWidth: true,　
            columnWidth: 160
        });
    });
 }
于 2015-01-04T20:06:51.170 回答
5

softk5 答案对我不起作用，导致大部分浏览器冻结。这是我的以下代码，它对我有用。

jQuery(document).ready(function(){
    jQuery("img.lazy").lazyload({
        effect: 'fadeIn',
        effectspeed: 1000,
        threshold: 200,
        load:function(){
            var $container = jQuery('.is_masonry');
            $container.masonry({
            }).imagesLoaded(function() {   $container.masonry();  });

        }
    });

});
于 2016-02-08T09:52:43.593 回答
3

原因是 Masonry 需要知道图像的尺寸才能正确布置项目。然而，LazyLoad 会延迟加载图像，直到图像在视口中，这意味着图像将没有尺寸（或具有您设置为 img src 的虚拟/占位符图像的尺寸）。

于 2012-06-21T16:30:50.223 回答
0

也许有人也会有问题，希望有所帮助。

如果不修改插件，就不可能使其与 WordPress photoswipe-masonry 主题一起使用。

接下来与此修改有关，仅与砌体有关

a)lazyload 使用 data-original="xxx" 属性来设置图片 url。不是 src 。你需要放置一些占位符。可能是 1x1 像素，将在没有延迟加载的情况下加载。

b）这个占位符需要为将来的延迟加载图像覆盖所有空间，或者砌体将使所有图像作为延迟加载视图可见。这是因为在加载图像之前它的大小为零 0px x 0px 。并且所有图像在加载前都适合可见区域。Lazyload 将全部计数为可见并全部加载。

为未来的图像安排所有空间，您需要一组

样式=“宽度：xxpx；高度：xxpx；”

只有 width="xx" 和 height="xx" 是不够的

所以图像占位符变成：

<img src="http:..1x1px" data-original="http://real_image" style="width:xxpx;height:xxpx;">

然后应用延迟加载正常方式和砌体。以任何顺序。

重要 - 砌体将宽度更新为其列大小，但不是高度，因此如果您的列大小 = 50px，那么您需要计算占位符的高度

新高度 = 50 / 实际宽度 * 实际高度；

所以对于 WordPress 主题需要

$scaled_height =$options['thumbnail_width']/$full[1] * $full[2];

......

<img src="http://xxxx/1x1px.jpg" data-original='. $thumb[0] .' itemprop="thumbnail" alt="'.$image_description.'" style="width:'.$full[1].'px;height:'.$scaled_height.'px;" width="'.$full[1].'" height="'.$full[2].'"/>

……

然后在 masonry init 下面添加新行

var reloading = false;
$.getScript('https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js',function(){
  $('.msnry_item img').lazyload({
      effect: 'fadeIn',
      //container: container,
      threshold : 200,
      skip_invisible : false,
      failure_limit : 5,
      load: function() {
          if( ! reloading ) {
             reloading = true;
             setTimeout(function(){ 
                  container.masonry('reload');
                  reloading = false;
             }, 500);
         }
      }
  });
});
于 2015-06-03T21:13:32.733 回答
0

尝试在LazyLoad的“ callback_loaded ”中重新使用“ Masonry ”

var ll = new LazyLoad({
    elements_selector: "img[data-src]",
    callback_loaded() {
        masonry = new Masonry(grid, {
            itemSelector: '.img-selector',
        });
    }
});

进一步添加的代码如下

callback_loaded() {
    masonry = new Masonry(grid, {
        itemSelector: '.img-selector',
    });
}
于 2019-09-03T11:12:49.403 回答