Issues with initial ajax load

Hey, after two days reading and trying to get a solution i still do not get the masonry layout running without displaying issues at first load and after an ajax call.

This is my code:

`var start = 0; var limit = 15; var reachedMax = false;

    $(window).scroll(function() {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {

            loadMoreProducts();

        }
    })

    $(document).ready(function()
        {
            loadMoreProducts();
        });

function loadMoreProducts(){
    if (reachedMax)
        return;

  $.ajax({
            url: '/includes/functions/ajax-load-products.php',
            method: "POST",
            dataType: "text",
            data:
            {
                getData: 1,
                start: start,
                limit: limit,
            },
            success: function(response){
                if (response == "reachedMax")
                {
                    reachedMax = true;

                        $(".footer_dummy").load("footer.php");

                }
                else
                {
                    start += limit;

                    var $grid = $('.grid');

                        $grid.imagesLoaded( function() {
                        $('.grid').show();
                        $grid.masonry({
                            itemSelector: '.grid-item',
                            columnWidth: 290,
                            fitWidth: true
                        });

                    var elems = response;
                    var $elems = $( elems );
                    $grid.append( $elems ).masonry( 'appended', $elems, true );
                    $grid.masonry("reloadItems");
                    $grid.masonry("layout");
                    });

                }
            }
  });

and this ist the page: http://test.sucobo.io

best regards

desandro / masonry

Issues with initial ajax load #1051