Just another lazy load image directive for AngularJS
The main goal of this directive is to show a way how we can implement the Medium progressive image loading.
Nothing new under the sun: typical module injection + adding the directive element to your html files.
angular.module('app', [ 'ngLazyImage' ]);Add <script>s to your code:
<script src="vendor/angular.min.js"></script>
<script src="build/angular.lazyimage.min.js"></script>Add a lazy-image element to your html:
<div>
<lazy-image width="400" height="200" source="/image/source.jpg" placeholder="/image/placeholder.jpg" />
</div>| Param | Type | Required | Default | Details |
|---|---|---|---|---|
| source | url | Yes | none | The source image |
| placeholder | url | Yes | none | A tiny version of the source image |
| width | integer | No | 300 | The canvas width |
| height | integer | No | 150 | The canvas height |