使用angularJS加载100个用户的数据以及DOM修改

时间:2016-02-02 10:59:24

标签: javascript jquery angularjs dom mousedown

我有100个用户的数据和他们的信息以及我得到他们的图像。很明显它会减速。所以我首先获得所有用户信息,然后尝试获取用户的图像。看起来这也是延迟的。所以我的计划是实现像facebook或twitter一样,一旦我们结束10个用户的信息,它应该加载其他10个用户。 我认为mousedown我们可以实现它。 我目前的代码看起来像这样。

<li ng-repeat="user in userss">
    <img ng-src="www.xxx.com/{{user.id}}.jpg" class="circle" altSrc="www.xxx.com/default.jpg" onerror="this.src = $(this).attr('altSrc')" />
    <span class="title">{{user.fullname }}</span>
</li>

谢谢,我想我们可以通过添加jQuery来实现,但我对jQuery一无所知。

2 个答案:

答案 0 :(得分:1)

使用<li ng-repeat="user in users track by user.id">

,您的表现会更好

参考:http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

答案 1 :(得分:0)

这是在jquery中实现的infinte scroll的解决方案。

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height()) {
       for(var x= z*10; x < (z+1)*10,user> x ;x++ ){
            newList.push(users[x]);
       }
          $scope.users = newList;
          $scope.$apply();         
   }
});

这里我限制了10个用户