blob: f3d823f97097b947d5923f03c0d89c963146bae6 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
ionic-image-lazy-load
=====================
## Demo
http://codepen.io/mvidailhet/pen/yNOGzY
http://codepen.io/pavei/pen/oFpCy
## Quick Start
Install using bower
```sh
bower install ion-image-lazy-load --save
```
or
Download the file JS *ionic-image-lazy-load.js*, save on your project and load it on your *index.html*.
```html
<script src="path/to/ionic-image-lazy-load.js"></script>
```
Load into your module:
```javascript
angular.module('yourapp',
['ionic', 'ionicLazyLoad'])
```
Set the `lazy-scroll` directive on your `<ion-content>` tag, that will listen to the scroll event:
``` javascript
<ion-content lazy-scroll>
```
And set the `img-lazy-src` directive on the image attribute instead of `src`:
```javascript
<img image-lazy-src="{{item.thumbnail}}">
```
You can also use it as a background-image for an element by setting the `image-lazy-background-image` paramameter to true:
``` javascript
<div image-lazy-src="{{item.thumbnail}}" image-lazy-background-image="true"></div>
```
You can also set an option to auto call `$ionicScrollDelegate.resize()` when the image `load` (default value is `false`):
```javascript
<img image-lazy-src="{{item.thumbnail}}" lazy-scroll-resize="true">
```
To show a ionic spinner while the image is loading, just specify a ionic spinner type (list is here: http://ionicframework.com/docs/api/directive/ionSpinner/):
```javascript
<img image-lazy-src="{{item.thumbnail}}" image-lazy-loader="lines">
```
Note: the styling of the loader position is up to you. The directive adds this html:
```html
<div class="image-loader-container">
<ion-spinner class="image-loader" icon="#spinnerStyle#"></ion-spinner>
</div>
```
You can set a distance from the bottom or right side of the screen where the image will start loading.
This will allow to start loading the image 100px below the bottom of the screen:
``` javascript
<img image-lazy-src="{{item.thumbnail}}" image-lazy-distance-from-bottom-to-load="100">
```
This will allow to start loading the image 100px before the right side of the screen:
```javascript
<img image-lazy-src="{{item.thumbnail}}" image-lazy-distance-from-right-to-load="100">
```
|
