使用 angularJS 和 DOM 修改加载 100 个用户的数据
loading Data of 100 users using angularJS along with DOM modification
我有 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。
<li ng-repeat="user in users track by user.id">
你的表现应该会更好
参考:http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/
这是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个用户
我有 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。
<li ng-repeat="user in users track by user.id">
参考:http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/
这是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个用户