使用 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】:<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 个用户
【讨论】:
以上是关于使用 angularJS 和 DOM 修改加载 100 个用户的数据的主要内容,如果未能解决你的问题,请参考以下文章
如何将 angularJs 用于动态创建的 HTML(未加载到 DOM)
在 angularjs 生命周期的哪个阶段完全加载了 DOM
AngularJS 指令在 <input> 最初加载到 DOM 时隐藏零