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

Posted

技术标签:

【中文标题】使用 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】:

&lt;li ng-repeat="user in users track by user.id"&gt; 你的表现应该会更好

参考: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 个用户

【讨论】:

以上是关于使用 angularJS 和 DOM 修改加载 100 个用户的数据的主要内容,如果未能解决你的问题,请参考以下文章

如何将 angularJs 用于动态创建的 HTML(未加载到 DOM)

在 angularjs 生命周期的哪个阶段完全加载了 DOM

angularjs和js的区别

AngularJS 指令在 <input> 最初加载到 DOM 时隐藏零

AngularJS 为什么 我在controller里修改了 变量的值,dom 没有改变

AngularJS、D3 和 JQuery 在同一页面中。 D3 无法读取正确的 DOM 尺寸