angular-lazy-img

Lightweight lazy load images plugin. Only 1kb after gziping. Pure JavaScript, only Angular as dependency.

Installation

1. bower install --save angular-lazy-img
2. Include angular-lazy-img in your HTML.

```html
<script src="<your-bower-components>/angular-lazy-img/release/angular-lazy-img.js"></script>
```

1. Inject the angular-lazy-img module in your application.

```js
angular.module('your.module', [
    'angularLazyImg'
]);
```

Usage

Just add lazy-img attribute with source to file that you want to lazy load
```html ```
If you want show spinner put it in src attribute
```html ```
You want to lazy load background image? No problem, add directive to anything you like and it will handle the rest.
```html ```
If you need to run the image check manually (for example when clicking on tabs that filter your image result), you can trigger it that way:
```js $rootScope.$emit('lazyImg:refresh'); ```
On success and error lazyImg will trigger events on $rootScope - lazyImg:success and lazyImg:error, passing as first param image

Configuration

Inside your config require 'lazyImgConfigProvider' and set custom options.
```js angular.module('your.module',

'angularLazyImg'

).config('lazyImgConfigProvider', function(lazyImgConfigProvider){

var scrollable = document.querySelector('#scrollable');
lazyImgConfigProvider.setOptions({
  offset: 100, // how early you want to load image (default = 100)
  errorClass: 'error', // in case of loading image failure what class should be added (default = null)
  successClass: 'success', // in case of loading image success what class should be added (default = null)
  onError: function(image){}, // function fired on loading error
  onSuccess: function(image){}, // function fired on loading success
  container: angular.element(scrollable) // if scrollable container is not $window then provide it here
});

}) ```

Use a scrollable container in a dynamic page

Just add ``lazyImgContainer`` attribute to your scrollable container to be considered when you scroll him.

Author

Copyright 2014, Paweł Wszoła (wszola.p@gmail.com)