ionic懒加载图片

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

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

加载到你的模块:

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

 

设置指令lazy-scroll到你的 <ion-content>标签，将监听滚动事件：

<ion-content lazy-scroll>

 

并且设置image-lazy-src指令 代替图片的src属性

<img image-lazy-src="{{item.thumbnail}}">

 

您还可以使用它作为一个元素的背景图像通过设置image-lazy-background-image 参数 为true:

<div image-lazy-src="{{item.thumbnail}}" image-lazy-background-image="true"></div>

您也可以设置一个选项设为自动调用ionicScrollDelegate.resize()当图像load的时候(默认值是false):

<img image-lazy-src="{{item.thumbnail}}" lazy-scroll-resize="true">

图像加载时显示ionic列表，指定一个ionic列表类型(从这些里面http://ionicframework.com/docs/api/directive/ionSpinner/);

 <img image-lazy-src="{{item.thumbnail}}" image-lazy-loader="lines">

注意：你可以调他的位置。下面是将指令添加到html的例子：

<div class="image-loader-container">
    <ion-spinner class="image-loader" icon="#spinnerStyle#"></ion-spinner>
</div>

你可以设置一个距离底部或者屏幕右侧的距离，当图像加载的时候显示。例如，这将允许加载的图像距离屏幕底部100px

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

例如，这将允许开始加载图像之前，距离右侧屏幕:100 px

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

加载图片的位置通过：

<div class="image-loader-container">
<img image-lazy-src="{{list.path}}" image-lazy-loader="lines" / >
</div>

image-loader-container 控制

.image-loader-container img{
width: 80px;
height:80px;
position: absolute;
left:0;
top:0;
}
.image-loader-container{
position:absolute;
width:80px;
height: 80px;
padding:20px 0 0 20px;
left: 5px;
top: 5px;*
}