Ionic 图片延时加载

图片的延时加载是为了提供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>

基本功能就这样,至于其他的延迟效果,需要时再看

原文地址:https://www.cnblogs.com/crazyguo/p/6050364.html