Isotope filtering + Lazy loading

I’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;
});

});

[flowdee]

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

[AndishehN]

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:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script> 

here is my code:

     $(window).load(function(){
        $('.grid').imagesLoaded(function(){
          $('.grid').isotope({
            itemSelector: '.grid-item',
            containerClass: 'isotope',
            layoutMode: 'masonry',
            percentPosition: true   
          });
        });
      });
      $(window).scroll(function(){
        $('.grid').isotope({
          itemSelector: '.grid-item',
          containerClass: 'isotope',
          layoutMode: 'masonry',
          percentPosition: true
        });
      });

      $(document).ready(function(){
        $('.grid-item img').lazyload({
          effect: 'fadeIn',
          threshold : 300
        });
      });

.grid {
	max-width: 69em;
	list-style: none;
	margin: 20px auto;
	padding: 0;
}
.grid::after {
  content: "";
  clear: both;
  display: table;
}
.grid-sizer,
.grid-item {
	display: block;
	padding: 7px;
}
@media (min-width: 530px) {
  .grid-sizer,
.grid-item {
    float: right;
    width: 50%;
  }
}
@media (min-width: 960px) {
  .grid-sizer,
.grid-item {
    width: 33%;
  }
}

<div class="grid">
          <div class="grid-sizer"></div>
          <div class="grid-item">
            <img src="assets/images/gallery/01.JPG"/>
          </div>
          <div class="grid-item">
            <img src="assets/images/gallery/02.JPG"/>
          </div>
          <div class="grid-item">
            <img src="assets/images/gallery/03.JPG"/>
          </div>
          <div class="grid-item">
            <img src="assets/images/gallery/04.JPG"/>
          </div>
          <div class="grid-item">
            <img src="assets/images/gallery/05.JPG"/>
          </div>
          <div class="grid-item">
            <img src="assets/images/gallery/06.JPG"/>
          </div>
          <div class="grid-item">
            <img src="assets/images/gallery/07.JPG"/>
          </div>
</div>