KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #dsh #dsh-plugin #ai-agent #codex #ai-agents #deepseek-harness #claude-code #cli #react #mcp

ionic-image-lazy-load

★ 365 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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
```

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 `image-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">
```

ionic-image-lazy-load

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README