jquery - 结合 LazyLoad 和 Jquery Masonry

Question

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

砖石工程在this page上进行.

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

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

谢谢

Answer 1

最近，我必须为我的一个网站解决这个问题。我尝试了几种方法，似乎有效。

<强>1。第一种方法:

• 在元素上加载砖石
• 在所有图像上放置占位符并对其使用延迟加载
• 现在，当每个图像触发lazyload.load回调时，重新加载masonry -> 一系列masonry('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]

注意:

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

干杯