https://github.com/avraammavridis/angular2-imagelazyload-directive

https://github.com/avraammavridis/angular2-imagelazyload-directive

Last synced: 7 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/avraammavridis/angular2-imagelazyload-directive
• Owner: AvraamMavridis
• Created: 2016-10-04T05:57:44.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2018-08-06T14:27:31.000Z (about 7 years ago)
• Last Synced: 2025-03-08T17:45:46.557Z (7 months ago)
• Language: TypeScript
• Size: 26.4 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 96
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# angular2-imagelazyload-directive

[![npm version](https://badge.fury.io/js/angular2-imagelazyload-directive.svg)](https://badge.fury.io/js/angular2-clickoutside-directive)

[![forthebadge](http://forthebadge.com/images/badges/built-with-love.svg)](http://forthebadge.com)

## Install

`npm i angular2-imagelazyload-directive --save`

### Import the directive to your project and use it in your images specifing a `data-src`, `width` and `height`

```typescript

import { ImageLazyLoadDirective } from 'angular2-imagelazyload-directive';

@Component({

  selector: 'my-app',

  template : `

  `,

  directives : [  ImageLazyLoadDirective ]

} )

class MyFirstComponent implements OnInit {

  constructor(){}

  ngOnInit(){}

}

```

By default the directive has a 300px threshold, meaning the image will be loaded 300px before it became visible in the viewport. You can change that by passing a threshold attribute to your `img` tag.

Also by default the images are fading-in in a duration of 1000ms, you can disable that with the `fadeIn` attribute or specify the duration using the `fadeInDuration` (default 1000ms)

### Contribute

Any pull-request is more than welcome :boom: :smile:

This project adheres to the Contributor Covenant [code of conduct](http://contributor-covenant.org/). By participating, you are expected to uphold this code.

### License

MIT