ionic 、ionic-image-lazy-load网络图片的懒加载和和加载效果，居中显示

1、确定使用的是ionic-image-lazy-load 架构

git地址：https://github.com/paveisistemas/ionic-image-lazy-load
首先是先将下载的ionic-image-lazy-load.js 引入到项目中；

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

2、常用主要的参数说明

2.1 设置lazy-scroll参数

缺少了这个参数就监听不到滚动事件，image-lazy-distance-from-bottom-to-load="100"就没有效果；

<ion-content lazy-scroll>

2.2 image-lazy-src/image-lazy-distance-from-bottom-to-load 含义

image-lazy-src加载的图片链接；
image-lazy-distance-from-bottom-to-load滚动到底部的距离才加载图片链接；
image-lazy-distance-from-right-to-load类同距离右边的距离才加载；

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

image-lazy-loader主要的是在加载过程中出现的动画效果，源码如下，这个可以配置，
可以改为android/ios等等；

 if ($attributes.imageLazyLoader) {
                        loader = $compile('<div class="image-loader-container"><ion-spinner class="image-loader" icon="' 
                            + $attributes.imageLazyLoader + '"></ion-spinner></div>')($scope);
                        $element.after(loader);
                    }

3、以上大概的掌握了就可以用了，补充一个动画效果居中显示

3.1代码引用， 如下不多解释

<ion-list>
          <ion-item class="cardname" ng-repeat="data_zxtmInfo in mainInfo_data_zxtm"
                    ng-click="goGoodDetail(data_zxtmInfo.target_url)">
              <img image-lazy-src="{{data_zxtmInfo.img_src}}" image-lazy-distance-from-bottom-to-load="100" image-lazy-loader="android">
          </ion-item>
      </ion-list>

3.2 google 看下效果

如上图所示，看到一个item中有三个层次；
ion-spinner就是动画效果了；
如果不配置image-loader-container和ion-item的cardname ，样式就会很难看；如下，没有配置的效果：

3.3 image-loader-container 和cardname的CSS

主要的是斜体的部分

.cardname{
        width: 100%;
        height: 170px;
        *position:relative;*
    }

    .cardname img{
        width: 100%;
        height: 100%;
    }

    .image-loader-container{
        *position:absolute;
        left: 43%;
        top: 43%;*
    }

以上就是iionic-image-lazy-load的主要内容，除了实例以外，大部分的内容是官网翻译过来。如果有其他的疑问或者在开发遇到问题，请留言；