Я потратил значительное количество времени, пытаясь заставить изотоп и ленивую загрузку работать вместе.
Проблема: отложенная загрузка работает, если пользователь прокручивает вниз, однако, если пользователь использует фильтры, элементы отображаются сверху, но изображения не загружаются.
Вот кто-то с такой же проблемой, но, кажется, он ее исправил. Я пробовал несколько вещей, но все еще не мог заставить его работать.
Вот обсуждение 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;
});
});