图片的延时加载是为了提供App的运行效率,那么是如何实现的呢?献上github: https://github.com/paveisistemas/ionic-image-lazy-load
1.下载ionic-image-lazy-load.js文件,拷贝到我们的lib目录下
2.在index.html页面中加入js文件引用
3.设置App依赖的模块
angular.module('ionicApp', ['ionic', 'ionicLazyLoad'])
4.在我们的list对象上设置延迟标志
<ion-content lazy-scroll> <ion-refresher pulling-text="下拉" refreshing-text="刷新中..." spinner="ios" on-refresh="doRefreshProduct()"></ion-refresher> <ion-list can-swipe="true"> <ion-item ng-repeat="p in productList" class="item-thumbnail-left" ng-click="toEdit($index)"> <img image-lazy-src="{{p.ImageUrl}}" class="dfimg1"/> <h2> {{p.Title}} </h2> <p class="date"> {{p.CreatedTime}} </p> <p class="introduction"> {{p.Content}} </p> <ion-option-button class="button-assertive" ng-click="toDel($index)"> 删除 </ion-option-button> </ion-item> </ion-list> <p class="tip" style="margin-top:15px;" ng-if="pltip==1">暂无产品</p> <ion-infinite-scroll ng-if="showScroll" spinner="ios" on-infinite="loadMoreProduct()" immediate-check="true" distance="1%"></ion-infinite-scroll> </ion-content>
基本功能就这样,至于其他的延迟效果,需要时再看