Question

我一直在努力拼凑砌筑和moo工具lazyload然而他们似乎都没有很好地在一起虽然它可能只是因为我在编码时有点无用！

砌体适用于this page。

然而，当我尝试将它与lazyload放在一起时，它似乎完全陷入困境。有谁知道如何将两个插件一起实现？

我花了6天时间试图解决这个问题，这是我最后的希望哈哈！

谢谢

Answer 1

最近，我要为我的一个网站解决这个问题。我尝试了几种方法，看起来很有效。

<强> 1。第一种方法：

在物品上装载砖石
在所有图片上放置占位符并在其上使用lazyload
现在，当每个图像触发lazyload.load回调时，重新加载砌体 - ＆gt;一系列砖石（'重装'） [用新图像更新了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框调整大小根据容器。我发现了这个技巧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

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

Answer 5

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

使其与wordpress一起使用photoswipe-masonry主题在没有插件修改的情况下是不可能的。

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

a）lazyload使用data-original =＆＃34; xxx＆＃34;属性设置图像网址。不是src。你需要放置一些占位符。可能是1x1像素，将加载没有lazyload。

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

为您需要设置的未来图像安排所有空间

风格=＆＃34;宽度：xxpx;高度：xxpx;＆＃34;

只是宽度=＆＃34; xx＆＃34;和height =＆＃34; xx＆＃34;还不够

因此图像占位符变为：

<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].'"/>

...

然后在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);

                                     }
                                  }
                              });

                    });

Answer 6

尝试重用 LazyLoad

的“ 已加载回调”中的“ 砌体”

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

结合LazyLoad和Jquery Masonry

6 个答案: