JQuery Freemasonry and Ajax fetch to add elements that cause image overlap

Question

Another overlapping issue using Freemasonry and Ajax to add elements to Wordpress. The first time additional elements are added, the images overlap. However, when the page reloads, the images no longer overlap. I understand that after some research this is related to calculating the height of the images.

The help page on the Freemasonry website suggests using the getimagesize function to specify the width and height of the images.

However, this is where I am stuck. Due to my limited knowledge of PHP, I have no idea how to use this function or where to place it in my code, so I'm looking for a small direction here. Can someone help me figure out how to integrate the getimagesize function into my code?

Here is the masonry code:

$(document).ready(function(){ var $container = $('#loops_wrapper'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.post_box', columnWidth: 302 }); }); }); 

This is the ajax fetch code:

 $('.load_more_cont a').live('click', function(e) { e.preventDefault(); $(this).addClass('loading').text('Loading...'); $.ajax({ type: "GET", url: $(this).attr('href') + '#loops_wrapper', dataType: "html", success: function(out) { result = $(out).find('.post_box'); nextlink = $(out).find('.load_more_cont a').attr('href'); $('#loops_wrapper').append(result).masonry('appended', result); $('.load_more_cont a').removeClass('loading').text('Load more posts'); if (nextlink != undefined) { $('.load_more_cont a').attr('href', nextlink); } else { $('.load_more_cont').remove(); } } }); }); 

Answer 1

You can try to implement the David DeSandro timer approach here to add images ...

"As recommended in the primer, the best solution for image processing is to have the size attributes defined in the img tag, especially when using Infinite Scroll. This solution is used in the example below.

Of course, this is not a viable option in some CMS, primarily Tumblr. In this situation, Freemasonry must be called up after the newly added images are fully loaded. This is done by delaying the callback of Freemasonry.

 function( newElements ) { setTimeout(function() { $wall.masonry({ appendedContent: $(newElements) }); }, 1000); } 

EDIT . If you cannot implement the idea of ​​a general delay for adding infinite scroll elements, you can try reloading after adding new elements so that instead

 $('#loops_wrapper').append(result).masonry('appended', result); 

do it like that

 $("#loops_wrapper").append(result).masonry('reload');