I am using Isotope, i am trying to get lazy load http://www.appelsiini.net/projects/lazyload working. however i also reference a plugin called Inview and ImagesLoaded.
I am having trouble getting them to work. my confusion lies in the difference between Inview and Lazy Loading! do these two plugins carry out the same function?
I initially was following this guide http://www.haizumdesign.com/masonry-infinite-scroll-inview-a-tale-of-3-plugins/ but i removed infinite scroll because it freezes my browser. I thought Inview and images loaded was enough to do lazy loading, but then i came across the lazy loading website and i got all confused.
Also it seems that isotope already comes with imagesloaded, so should i stop loading a separate js file?
Please help me, the following is my isotope config
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').imagesLoaded(function(){
$('#big_container').isotope({
itemSelector : '.item',
layoutMode : 'masonry',
masonry: {
columnWidth: 1,
},
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 );
}
}
});
}); //close imagesLoaded
$('#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;
});
});
$(document).on("inview", ".item", function(e) {
var $this = $(this);
if(!$this.hasClass('loaded')) {
$this.addClass('loaded');
$this.css('visibility','visible').hide().fadeIn('slow');
}
});
The Images Loaded plugin is included in Isotope, see the documentation. You usually implement it with Paul Irish’s Infinite Scroll plugin. As for lazy loading, there are answers on SO right here and elsewhere. But, if you’re implementing infinite scroll correctly and your images are optimised for fast loading with ImageOptim or whatever, you probably won’t need lazy loading anyway.