要使同位素的排序/过滤与延迟加载一起使用,您必须执行以下操作。
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 http://www.appelsiini.net/projects/lazyload )
滚动页面后,延迟加载会循环加载已加载的图像。在循环中,它检查图像是否变得可见。默认情况下,当找到折叠下方的第一个图像(不可见)时,循环将停止。这是基于以下假设。页面上图像的顺序与 HTML 代码中图像的顺序相同。对于某些布局假设,这可能是错误的。
使用同位素排序/过滤列表,页面顺序肯定与 HTML 不同,因此我们需要调整我们的failure_limit
.
正如你所看到的,我们存储了 jQuery 对象,以便我们可以使用它length-1
作为我们的 failure_limit。如果你好奇为什么会这样length-1
,这是因为lazyload的update方法中进行了以下检查。
if (++counter > settings.failure_limit) {
return false;
}
其他事件的延迟加载
如果您没有在滚动时触发延迟加载,则需要将“滚动”触发器交换为您正在使用的任何事件。
Demo
http://jsfiddle.net/arthurc/ZnEhn/ 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);
})
});