结合LazyLoad和Jquery Masonry
我一直试图拼凑砌体和moo工具lazyload然而他们似乎都没有很好地在一起，虽然它可能只是因为我在编码时有点无用！
砖石在这个页面上工作 。
然而，当我试图将它与lazyload放在一起时，它似乎完全陷入困境。 有谁知道如何将两个插件一起实现？
我花了6天时间试图解决这个问题，这是我最后的希望哈！
谢谢
最近，我要为我的一个网站解决这个问题。 我尝试了几种方法，看起来很有效。
1.第一种方法：
- 在物品上装载砖石
- 在所有图像上放置占位符并对其使用延迟加载
- 现在，当每个图像激活lazyload.load回调，重新加载砌体 – >一系列砌体（’reload’）[更新jsfiddle与新图像，更容易说明点]
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框大小。 我在这里找到了这个技巧
- 像正常一样延迟加载，从现在开始无需触发任何重载，如果没有图像，则正确排列框
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 */和commentdisplay: blockfor#container.fluid .item img
干杯
我在其他相同问题的文章上发布了相同的答案。 如果你有问题图像重叠，我在下面的网站找到了解决方案，虽然它是日文的。
http://www.webdesignleaves.com/wp/jquery/1340/
希望这会有所帮助。
关键是使用以下;
$('img.lazy').load(function(){ ... })
HTML
title 1
title 2
....
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 }); }); }
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(); }); } }); });
原因是砌体需要知道图像的尺寸才能正确布置物品。 但是，LazyLoad延迟加载图像，直到图像在视口中，这意味着图像将没有尺寸（或者具有您设置为img src的虚拟/占位符图像的尺寸）。
也许有人会有问题，希望有所帮助。
如果没有插件修改，使用wordpress photoswipe-masonry主题是不可能的。
接下来与这个修改有关，只是与砌体有关
a）lazyload使用data-original =“xxx”属性来设置图像url。 不是src。 你需要放置一些占位符。 可能是1×1像素，将加载没有lazyload。
b）此占位符需要覆盖所有空间以用于将来延迟加载的图像，或者砌体将使所有图像作为延迟加载视图可见。 这是因为在加载图像之前它的大小为0px x 0px。 并且所有图像在加载之前都适合可见区域。 Lazyload计数全部可见并加载全部。
为您需要设置的未来图像安排所有空间
风格= “宽度：xxpx;高度：xxpx;”
只是width =“xx”和height =“xx”是不够的
所以图像占位符变为：
然后应用延迟加载正常方式和砌体。 以任何顺序。
重要 – 砌体更新宽度到它的列大小，但不是高度，所以如果您的列大小= 50px，那么您需要计算占位符的高度
new_height = 50 / actual_width * actual_height;
所以对于wordpress主题需要
$scaled_height =$options['thumbnail_width']/$full[1] * $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); } } }); });