https://github.com/paveisistemas/ionic-image-lazy-load

Directive to Ionic Framework that only loads an image when it is seen by the user.
https://github.com/paveisistemas/ionic-image-lazy-load

Last synced: 17 days ago
JSON representation

Directive to Ionic Framework that only loads an image when it is seen by the user.

• Host: GitHub
• URL: https://github.com/paveisistemas/ionic-image-lazy-load
• Owner: paveisistemas
• License: mit
• Created: 2014-10-01T00:37:43.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2016-08-15T14:05:13.000Z (almost 8 years ago)
• Last Synced: 2024-06-18T23:05:05.783Z (18 days ago)
• Language: JavaScript
• Homepage: http://codepen.io/pavei/pen/oFpCy
• Size: 39.1 KB
• Stars: 367
• Watchers: 20
• Forks: 118
• Open Issues: 27
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-ionic - paveisistemas/ionic-image-lazy-load
• awesome-stars - ionic-image-lazy-load - Directive to Ionic Framework that only loads an image when it is seen by the user. (JavaScript)

README

        
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

```

Load into your module:

```javascript

angular.module('yourapp',

              ['ionic', 'ionicLazyLoad'])

```

Set the `lazy-scroll` directive on your `` tag, that will listen to the scroll event:

``` javascript

```

And set the `image-lazy-src` directive on the image attribute instead of `src`:

```javascript

 

```

You can also use it as a background-image for an element by setting the `image-lazy-background-image` paramameter to true:

``` javascript



```


You can also set an option to auto call `$ionicScrollDelegate.resize()` when the image `load` (default value is `false`):

```javascript

 

```

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

 

```

Note: the styling of the loader position is up to you. The directive adds this html:

```html



    



```


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

 

```

This will allow to start loading the image 100px before the right side of the screen:

```javascript

 

```