Infinite scroll Masonry callback imagesloaded problem

This is sort of a masonry problem, but it has to do with the callback function of infinite scroll.

I have masonry working together with infinite scroll using the following code in the header.php:

jQuery(document).ready(function($){
			$('.category-collection').hide();
			imagesLoaded( '#content', function() {
				$('.category-collection').fadeIn();
				jQuery(document).ready(function($){
  					$('#content').masonry({ singleMode: true });
				});
			});
		});

and this code in the callback function:

function(newElements, data)
    {
    var $newElems = $( newElements ).css({ opacity: 0 });
  $newElems.imagesLoaded(function(){
    $newElems.animate({ opacity: 1 });
    $('#content').masonry( 'appended', $newElems, true );
  });
    }

I’m using infinite scroll 2.6.2 and have it set as follows:
content selector: #content
#nav-below (this element is made to be small and invisible with css)
#nav-below a:first
.post
masonry/isotope
debug: true

Infinite scroll and masonry are both working, but after loading more posts, posts start overlapping. This happens only the first time you load a page so it seems the callback function is acting too soon. But the code clearly is using the imagesLoaded function, so I don’t understand.

Next to this the firefox console shows me this error:
function statement requires a name
function(newElements, data)

I read all I could find about the problem and still not being able to understand it. Especially I don’t understand the newElements part, how does it work? How does it get the proper elements?

The website: http://stock.wendelavandijk.com

Image of the issue: stock.wendelavandijk.com/masonryinfscroll.png

https://ww.wp.xz.cn/plugins/infinite-scroll/