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

Posted 2023-05-09

【中文标题】使用 angularJS 和 DOM 修改加载 100 个用户的数据

【英文标题】：loading Data of 100 users using angularJS along with DOM modification

【发布时间】：2016-05-11 03:32:02

【问题描述】：

我有 100 个用户的数据和他们的信息以及我得到他们的图像。很明显，它会慢下来。所以我首先获取用户的所有信息，然后尝试获取用户的图像。看起来这也延迟了。所以我的计划是在我们结束 10 个用户的信息后像 facebook 或 twitter 一样实施，它应该加载其他 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 没有任何概念。

【参考方案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/

【讨论】：

这看起来我们可以使用track by来刷新整个页面。

UI-Bootstrap 包也有一个分页组件，你可以在这里看到它的工作：plnkr.co/edit/eheFSh?p=info

不，我将它用于智能手机，所以如果它像 facebook 或 twitter 一样工作会更好。一旦到达页面末尾，他们就会在哪里加载。

然后使用像这样的无限滚动条之一：github.com/sroze/ngInfiniteScroll，演示：sroze.github.io/ngInfiniteScroll/demo_async.html

@JoaozitoPolo 我完全不同意。 Angular 很棒，jQuery 也很棒，但它们基本上是使用 DOM 的相反方法。两种美味最好分开享用。

【参考方案2】：

这是在 jquery 中实现的无限滚动的解决方案。

$(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 个用户