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/ （滚动一段时间后发生错误）

任何形式的帮助将不胜感激

最好的问候安德烈亚斯

顺便说一句：Firefox 发生错误，而不是谷歌浏览器

4

1 回答 1

0

问题是 isAnimated 标志，当我加载超过 50 个元素时，我的浏览器卡住了。我不确定它是否是我的滚动脚本、砌体或 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 回答