1

いくつかの ajax 呼び出しの後、ブラウザーがどんどん遅くなっていく (フリーズする)...

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;



                }
            );
}

動作例 http://www.dasmerkendienie.com/ (しばらくスクロールするとエラーが発生します)

あらゆる種類の助けをいただければ幸いです

よろしくアンドレアス

ところで：Google Chromeではなく、Firefoxでエラーが発生します

4

1 に答える 1

0

問題は isAnimated フラグでした。50 を超える要素をロードすると、ブラウザが動かなくなりました。それが私のスクロール スクリプトのバグなのか、masonry なのか jquery なのか、正確にはわかりません。しかし、少なくともそれは私の問題を解決しました。

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

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


  isAnimated : false,
  isFitWidth : false

}).imagesLoaded(function() {   $container.masonry('reload');  });
于 2012-11-14T04:31:48.530 に答える