当您向下滚动页面时,如何实现内容的渐进式加载?否则将同时加载1000张图像。
答案 0 :(得分:24)
使用无限滚动指令。 ngInfiniteScroll
<强> HTML 强>
<div ng-app='myApp' ng-controller='DemoController'>
<div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
<img ng-repeat='image in images' ng-src='http://placehold.it/225x250&text={{image}}'>
</div>
</div>
<强> JS 强>
var myApp = angular.module('myApp', ['infinite-scroll']);
myApp.controller('DemoController', function($scope) {
$scope.images = [1, 2, 3, 4, 5, 6, 7, 8];
$scope.loadMore = function() {
var last = $scope.images[$scope.images.length - 1];
for(var i = 1; i <= 8; i++) {
$scope.images.push(last + i);
}
};
});
答案 1 :(得分:17)
我不想使用ngInfiniteScroll
发布的其他人,因为我的移动应用程序不使用jQuery,所以没有必要加载它。
无论如何,我发现一个jsfiddle用纯Javascript解决了这个问题。
<强> HTML 强>
<div id="fixed" when-scrolled="loadMore()">
<ul>
<li ng-repeat="i in items"></li>
</ul>
</div>
<强>的JavaScript 强>
function Main($scope) {
$scope.items = [];
var counter = 0;
$scope.loadMore = function() {
for (var i = 0; i < 5; i++) {
$scope.items.push({
id: counter
});
counter += 10;
}
};
$scope.loadMore();
}
angular.module('scroll', []).directive('whenScrolled', function() {
return function(scope, elm, attr) {
var raw = elm[0];
elm.bind('scroll', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attr.whenScrolled);
}
});
};
});
答案 2 :(得分:0)
Ben Nadel为此提供了一个很好的解决方案,他考虑了窗口和文档的大小调整。他还避免在每个ng-repeat节点之后重新绘制。 Check it out
答案 3 :(得分:0)
我创建的模块与ngInfiniteScroll大致相同,但不依赖于jQuery。它确实需要考虑窗口大小调整。 ngInfiniteScroll在我的应用程序中没有正常运行,因此我已经构建了自己的应用程序,而且它更轻松。