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>

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

  • 相关阅读:
    JQuery性能优化
    分页控件X.PagedList.Mvc
    《转》sql 、linq、lambda 查询语句的区别
    Linq的连表查询
    MVC页面直接F5出错
    详解集合
    Json的序列化与反序列化
    《转》dbcontext函数
    《转》jquery中的$.ajax的success与error
    cocos creator基础-(二十七)httpclient Get POST
  • 原文地址:https://www.cnblogs.com/crazyguo/p/6050364.html
Copyright © 2011-2022 走看看