http://codepen.io/mvidailhet/pen/yNOGzY http://codepen.io/pavei/pen/oFpCy

Install using bower

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.

<script src="path/to/ionic-image-lazy-load.js"></script>

Load into your module:

angular.module('yourapp',
              ['ionic', 'ionicLazyLoad'])

Set the lazy-scroll directive on your <ion-content> tag, that will listen to the scroll event:

<ion-content lazy-scroll>

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

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

<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):

 <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/):

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

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

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

 <img image-lazy-src="{{item.thumbnail}}" image-lazy-distance-from-right-to-load="100">