ImagesLoaded method that does not work with jQuery cluster and infinite scroll

Question

I use jQuery masonry and now add an infinite scroll. There are images in almost every brickwork, and before I used infinite scrolling, the images loaded well, and everything was great. I added the next part of javascript for endless scrolling and added the imageLoaded method inside, but when new bricks are added, they go out to all the ones built on top. My guess is that I am not adding the imagesLoaded method properly in the infinite scroll callback, but I could not find my error. Here is the code

<script type="text/javascript"> $(function(){ var $container = $('#container'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.tile', columnWidth : 240 }); }); var $container = $('#container'); $container.infinitescroll({ navSelector : ".flickr_pagination", // selector for the paged navigation (it will be hidden) nextSelector : "a.next_page", // selector for the NEXT link (to page 2) itemSelector : "div.tile" // selector for all items you'll retrieve }, // trigger Masonry as a callback function( newElements ) { var $newElems = $( newElements ); $container.imagesLoaded(function() { masonry( 'appended', $newElems ); }); } ); }); </script> 

The first jQuery masonry call worked fine and was not affected. This is the second part where the problem seems to be. Thanks for the help and let me know if you need more information.

Answer 1

Here is the answer

 $(function(){ var $container = $('#container'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.tile', columnWidth : 240 }); }); $container.infinitescroll({ navSelector : '.flickr_pagination', // selector for the paged navigation nextSelector : 'a.next_page', // selector for the NEXT link (to page 2) itemSelector : '.tile', // selector for all items you'll retrieve loading: { finishedMsg: 'No more pages to load.', img: 'http://i.imgur.com/6RMhx.gif' } }, // trigger Masonry as a callback function( newElements ) { // hide new items while they are loading var $newElems = $( newElements ).css({ opacity: 0 }); // ensure that images load before adding to masonry layout $newElems.imagesLoaded(function(){ // show elems now they're ready $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); }); } ); }); 

The problem was that I called .imagesLoaded () in the $ container in the infinite scroll callback function, and I had to call it in $ newElements.