#angular-lazy-loader

AngularJS lazy loading directive for lazy loading images and videos(via iframe).

Description

A 1 kB minimalistic and lightweight AngularJS directive to lazy load images, background images, and iframes.

Installation

npm install angular-lazy-loader

Demo

http://tarun-dugar.github.io/angular-lazy-loader/

Usage

1. Include angular-lazy-loader.min.js after the angularjs library.

2. Or, you can use require:

   var lazyLoader = require('angular-lazy-loader');

3. Add the 'angular-lazy-loader' module to your app as follows:

   angular.module('yourApp', ['angular-lazy-loader'])

4. Add the attribute (directive) 'angular-lazy-load' to the HTML element within which you want to lazy load images and iframes:

   <div angular-lazy-load>
   </div>

5. Optionally, set the threshold attribute that accepts a pixel value to load the asset when it is 'threshold' pixels away (vertically) from the viewport.

   <div angular-lazy-load threshold="200">
   </div>

6. Replace 'src' attribute of 'img', 'iframe', and 'div' tags with 'data-src':

   <img data-src="<your_url>" />