Progressive loading in ng-repeat for images, angular js

Question

How do I implement progressive loading of content as you scroll down the page? Otherwise 1000 images would load at the same time.

Answer 1

Use infinite scrolling directive. ngInfiniteScroll

DEMO

---

HTML

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);
    }
  };
});