Question

i wrote a small endless scrolling script, with masonry for the layout,
after some ajax calls the browser is getting slower and slower (freeze)…

var $container = jQuery('#container');

    $container.masonry({
      itemSelector: '.box',
      columnWidth: 100,


      isAnimated : true,
      isFitWidth : false

    }).imagesLoaded(function() {
   $container.masonry('reload');
  });



var isLoading = false;
var endofdata = false;
var page=1;
$(window).scroll(function() {

    if ( $(window).scrollTop()+1 >= ( $(document).height() - $(window).height() ) )
    {
        if ( endofdata )
            return false;

        if (isLoading) {

            return false; // don't make another request, let the current one complete, or
            // ajax.abort(); // stop the current request, let it run again
        }
        isLoading =true;
        ajaxLoadActivity('bottom', true);
    }

});
var box;
function ajaxLoadActivity(one, two) {
     page=page+1;

     $.post('api.php', {'action' : "next", 'next' : page },
        function(data){
                 if(data == null)
                     endofdata=true;

                 jQuery.each(data, function(index, value){                        
                     box+="<div class=\"box\"><a href=\"page/"+value.id +"\">#" +value.id + "</a> " +value.data+"</div>";

                 });
                 boxes = $(box);
                 $container.append(boxes);
                 var $newElems = $( boxes ).css({ opacity: 0 });
                 $newElems.imagesLoaded(function(){
                     $newElems.animate({ opacity: 1 });
                     $container.masonry( 'appended', $newElems, true );

                 });


                 box="";
                 isLoading=false;



                }
            );
}

working example
http://www.dasmerkendienie.com/
(error happens after a while scrolling)

any kind of help would be appreciated

best regards
andreas

btw: error occurs on firefox, not google chrome

Answer 1

The Problem was the isAnimated flag, my browser was getting stuck when i loaded more
than 50 elements.
Iam not exactly sure if its a bug in my scrolling script, in masonry or jquery.
But at least it fixed my problem.

var $container = jQuery('#container');

$container.masonry({
  itemSelector: '.box',
  columnWidth: 100,


  isAnimated : false,
  isFitWidth : false

}).imagesLoaded(function() {   $container.masonry('reload');  });