Как реализовать прогрессивную загрузку контента при прокрутке страницы вниз? В противном случае 1000 изображений загружались бы одновременно.
Прогрессивная загрузка в ng-repeat для изображений, angular js
Ответы (4)
Используйте директиву бесконечная прокрутка. 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);
}
};
});
Я не хотел использовать 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);
}
});
};
});
Источник: http://jsfiddle.net/vojtajina/U7Bz9/
У Бена Наделя есть хорошее решение для этого, где он учитывает изменение размера окна и документа. Он также избегает перерисовки после каждого узла ng-repeat. Посмотрите.
Я создал модуль, который делает примерно то же самое, что и ngInfiniteScroll, но не зависит от jQuery. Он учитывает изменение размера окна. ngInfiniteScroll не работал должным образом в моем приложении, поэтому я создал свой собственный, и он намного легче.
https://github.com/Bram77/su-endless-scroll