问题：如果用户滚动下来,延迟加载工作,但是如果用户使用过滤器,则项目将显示在顶部,但图像将不会加载.
这是有同样问题的人,但似乎他已经解决了这个问题.我尝试了几件事情,但仍然无法让它工作.
这是打字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'),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;
});
});
解决方法
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)
After scrolling page Lazy Load loops though unloaded images. In loop it checks if image has become visible. By default loop is stopped when first image below the fold (not visible) is found. This is based on following assumption. Order of images on page is same as order of images in HTML code. With some layouts assumption this might be wrong.
使用同位素排序/过滤列表,页面顺序与HTML完全不同,因此我们需要调整我们的fail_limit.
你可以看到我们存储jQuery对象,以便我们可以使用它的length-1作为我们的fail_limit.如果你好奇为什么长度为1,这是因为以下检查lazyload的更新方法.
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',masonry: {
columnWidth: 5,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'),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);
})
});