zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    __weak与__block修饰符区别
    Socket 记录
    Python yaml文件中文读取写入
    Xshell 连接 本地虚拟机
    MySQL查询学生表
    Python Excel读写操作
    pytest mark标记运行
    pytest 参数化
    pytest xfail参数详解
    pytest 失败截图
  • 原文地址:https://www.cnblogs.com/crazyguo/p/6050364.html
Copyright © 2011-2022 走看看