Skip to content
Lazy-loading and infinite scroll library for AngularJS
Branch: master
Clone or download


Lazy-loading and infinite scroll library for AngularJS

Live Demo:

Demo App with Spec Suite:

Requires one simple directive wrapping the targeted area.

The widget is configured via the element's attributes, which miror the keys:

  • data : The object on which you are storing the data sets:
$ = { dbCollection: [], otherHash: {}, anotherList: []} 
  • collectionKey : The key(string) to access the collection you will iterate through:
collectionKey = "dbCollection" 
  • dataService : The angular service that makes external api calls

  • fetchMethod : The method on your dataService that makes the api call. Must return a promise.

  • range : number of items to be loaded on each lazyLoad trigger

  • dataKeys : the keys expected to be found on the response of the api call (used to map the response onto a cache object)

  • startDelay : time in milliseconds to delay the start of the api call

  • appendDelay : time in milliseconds to delay appending the response of the api call (because too quick of a response can feel less magical to the user)

  • spinnerColor: the rgb or hex color code to determine the spinner's fill color


In your index.html:

<script src="bower_components/ngLazy/dist/lazyLoader.js"></script>

In your AngularJS app:

angular.module('myApp', [

In your view, wrap the element containing the ng-repeat with the lazy-load element, using the 'lazy' prefix on attributes for configuring:

          <table class="table table-striped table-hover">
                 <tr class="cohort-id-col fx-fade-down fx-easing-bounce fx-speed-800" ng-repeat="datum in data.mongo">
                      <td class="cohort-pic">
                        <span class="cohort-name">{{ datum.First }} {{ datum.Last }}</span><br>
                        <img class="avi" ng-src="{{ datum.Email | MD5 }}">


This library is difficult to test, and improve, without any sort of integration in a working application. That's why there's Please visit the repo for the unit and e2e tests.

###Library installation:

bower install ngLazy

###Building and editing

Please reference the demo app and its specs while developing in this library. Upon making changes and needing to re-build:

gulp build

###Demo App / Specs Installation

clone down the repo:

git clone

install the dependencies:

cd ngLazy-demo
npm install
bower install

###Running it:

serve it:

grunt serve

###Run the specs:

first, serve it. then:

grunt test

Pull Requests are Welcomed


  • more flexibility with different api responses and data services
You can’t perform that action at this time.