Isotope filtering + Lazy loading
See original GitHub issueI’ve spent considerable amount of time trying to get isotope and lazy loading working together.
The issue: lazy loading works if the user scrolls down, however if the user uses the filters, the items show up on top but the images will not load.
Here is someone with the same issue, but it seems he fixed it. I tried several things but still couldnt get it working.
Here is the dicussion https://github.com/tuupola/jquery_lazyload/issues/51
Thanks alot for your help
The code I am using is as follow.
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;
});
});
Issue Analytics
- State:
- Created 11 years ago
- Comments:12 (1 by maintainers)
Top GitHub Comments
I wrote a little snippet in order to refresh lazy load status and displaying items after using isotope filter/sort: https://gist.github.com/flowdee/b6e33d61d36bcb8323fa
hi @itzikbenh I have the same issue and I used your solution to solve the problem of lazy-loading, but lazy-load doesn’t work and all images load immediately. do you have any suggestion for me? thank you in advance. this is a part of my code head:
here is my code: