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.

Sathrum

Answer 1

I didn't want to use ngInfiniteScroll the other guy posted as my mobile app does not use jQuery so there is no point in loading it just for this.

Anyhow, I found a jsfiddle with pure Javascript that solves this problem.

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

Source: http://jsfiddle.net/vojtajina/U7Bz9/

Sathrum

This solution doesn't deal with page resize (by the user) or div resize, so you could be left with blank space even though there are more items "waiting" to be added. – Solute

This makes use of Angular aswell, just like the infinite scrolling answer EpokK gave. – Affra

Answer 2

Use infinite scrolling directive. ngInfiniteScroll

DEMO

---

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

Stinkstone

Is there a non Jquery solution? as this is for a mobile app. – Sathrum

By default, AngularJS does not use jQuery. And zepto is definitely a bad choice (github.com/angular/angular.js/pull/3350) – Joannajoanne