结合 LazyLoad 和 Jquery Masonry

Question

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

砌体在this page上工作。

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

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

谢谢

Answer 1

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

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 这样的网站，我认为它不遵循第一种方法，因为它们甚至在加载任何图像之前就已经安排了容器框，因此，我试图实现的只是显示与图像具有相同比例的框。步骤是：

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

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

干杯

Answer 2

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

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
        });
    });
 }    

Answer 3

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();  });

        }
    });

});

Answer 4

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

Answer 5

尝试在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',
    });
}

Answer 6

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

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

next 与此修改有关，仅与砌体有关

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

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

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

style="width:xxpx;height:xxpx;"

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

所以图片占位符变成了：

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

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

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

new_height = 50 / actual_width * actual_height;

所以对于 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].'"/>

....

然后在砌体初始化下面添加新行

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);
         }
      }
  });
});