结合LazyLoad和Jquery Masonry

Question

我一直试图拼凑砌体和moo工具lazyload然而他们似乎都没有很好地在一起尽管它可能只是因为我在编码时有点无用!

砖石在这个页面上工作.

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

• 传递你的图像尺寸(只需返回一个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

干杯

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 的虚拟/占位符图像的尺寸）。