angular-lazy-load-images

A angular directive for progressively loading images based on window position

Installation

or via NPM

$ npm install --save angular-lazy-load-images

or the simple way, by including /dist/angular-lazy-load-images.min.js into the head of your HTML.

Usage

Follow these steps to get it working in your project. In src you can see a working example of the module and play around with it. Alternatively, just follow these steps.

Adding to your Angular project

You can add the module as a dependency after declaring your own module, like so:

angular
    .module('myApp', ['angular-lazy-load-images'])
    .config(config)
    .run(run);

The directive is now available to your app and can be used in your HTML.

HTML

To include the directive, use the following markup:

<image-loader-directive
    img-class="loader"
    img-url="{{ url }}"
    img-width="300"
    img-height="300"
    img-alt="A sample alt message">
</image-loader-directive>

Support

This module has been developed to support versions of Angular from 1.2.2 up to 1.4.5 - If IE8 support is required please make sure to use Angular 1.2.

Browser Support

This module has been developed to support all modern browsers will providing legacy support for IE8 and up.

Development

If you wish to contribute or amend the source files and recompile you can do so by running the local development tasks.

You will need to install the dependencies by running npm install then run the default gulp task by running gulp. This will create a local server and run the uncompiled version of the assets. The files are then visible at: http://localhost:8001

Unit tests are still to be added.

Roadmap

• Unit tests