Lazy-loading and infinite scroll library for AngularJS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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