题
我花了相当多的时间试图让同位素和延迟加载一起工作。
问题:如果用户向下滚动,延迟加载工作,但是如果用户使用过滤器,项目显示在顶部,但图像将不会加载。
这是一个有同样问题的人,但似乎他修复了它。我尝试了几件事,但仍然无法使它工作。
这是讨论区 https://github.com/tuupola/jquery_lazyload/issues/51
谢谢你的帮助
我正在使用的代码如下。
jQuery(document).ready(function($) {
$('#big_container .media_block img').each(function(index) {
var item_height = $(this).attr("height");
$(this).parent().parent().css("height",item_height);
});
$('#big_container').isotope({
itemSelector : '.item',
layoutMode : 'masonry',
masonry: {
columnWidth: 5,
},
sortBy : 'date',
sortAscending : false,
getSortData : {
date : function ( $elem ) {
return $elem.find('.date').text(); // Date format should be [Y-m-d H:i]
},
views : function( $elem ) {
return parseInt( $elem.attr('data-views'), 10 );
},
//featured : function ( $elem ) {
// return $elem.attr('data-featured');
// },
rates : function( $elem ) {
return parseInt( $elem.attr('data-rates'), 10 );
},
comments : function( $elem ) {
return parseInt( $elem.attr('data-comments'), 10 );
}
}
});
$('#sort-by li a').click(function(){
var $this = $(this);
if ($(this).parent().hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents();
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
var sortName = $(this).attr('href').slice(1);
$('#big_container').isotope({ sortBy : sortName });
return false;
});
});
解决方案
要获得isotope的排序/过滤与lazyload一起工作,您必须执行以下操作。
jQuery(document).ready(function($) {
var $win = $(window),
$con = $('#container'),
$imgs = $("img.lazy");
$con.isotope();
$con.on('layoutComplete', function(){
$win.trigger("scroll");
});
$imgs.lazyload({
failure_limit: Math.max($imgs.length - 1, 0)
});
});
解释说明
根据文档( http://www.appelsiini.net/projects/lazyload )
滚动页面后,延迟加载循环虽然卸载图像。在循环中,它检查图像是否变得可见。默认情况下,当找到折叠下面的第一个图像(不可见)时,循环将停止。这是基于以下假设。页面上的图像顺序与HTML代码中的图像顺序相同。对于一些布局假设,这可能是错误的。
使用同位素排序/过滤列表,页面顺序肯定与HTML不同,因此我们需要调整我们的 failure_limit
.
正如你所看到的,我们存储jQuery对象,以便我们可以使用它 length-1
作为我们的失败。如果你想知道为什么会这样 length-1
, ,是因为在lazyload的update方法中进行了如下检查。
if (++counter > settings.failure_limit) {
return false;
}
延迟加载其他事件
如果您没有在滚动上触发lazyloads,则需要将"滚动"触发器交换为您正在使用的任何事件。
示范
http://jsfiddle.net/arthurc/ZnEhn/
网站代码
我将一些jQuery对象存储在变量中,因为它们需要重新使用。
jQuery(document).ready(function($) {
var $window = $(window);
var $images = $('#big_container .media_block img');
var $big_container = $('#big_container');
$images.each(function(index) {
var item_height = $(this).attr("height");
$(this).parent().parent().css("height",item_height);
});
$big_container.isotope({
itemSelector : '.item',
layoutMode : 'masonry',
masonry: {
columnWidth: 5,
},
sortBy : 'date',
sortAscending : false,
getSortData : {
date : function ( $elem ) {
return $elem.find('.date').text(); // Date format should be [Y-m-d H:i]
},
views : function( $elem ) {
return parseInt( $elem.attr('data-views'), 10 );
},
//featured : function ( $elem ) {
// return $elem.attr('data-featured');
// },
rates : function( $elem ) {
return parseInt( $elem.attr('data-rates'), 10 );
},
comments : function( $elem ) {
return parseInt( $elem.attr('data-comments'), 10 );
}
}
});
$big_container.on('layoutComplete', function(){
$win.trigger("scroll");
});
$('#sort-by li a').click(function(){
var $this = $(this);
if ($(this).parent().hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents();
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
var sortName = $(this).attr('href').slice(1);
$big_container.isotope({ sortBy : sortName });
return false;
});
$images.lazyload({
failure_limit : Math.max($images.length-1, 0);
})
});
不隶属于 StackOverflow