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

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

Ionic 图片延时加载的更多相关文章

  1. picLazyLoad 图片延时加载,包含背景图片

    /** * picLazyLoad 图片延时加载,包含背景图片 * $(img).picLazyLoad({...}) * data-original 预加载图片地址 * alon */ ;(func ...

  2. 图片延时加载jquery.inview.js用法详解

    我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...

  3. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

  4. 一段实现页面上的图片延时加载的js

    大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较 ...

  5. js实现网页图片延时加载的原理和代码 提高网站打开速度

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  6. js实现图片延时加载的原理

    实现原理: 附:(http://www.cnblogs.com/fishtreeyu/archive/2011/03/12/1982067.html) 把所有需要延时加载的图片改成如下的格式: < ...

  7. [转载]jQuery.lazyload详解 - 图片延时加载

    jQuery实现图片延迟加载,不知道是否可以节省带宽呢?有人知道吗? 这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢? <script type="text/javascr ...

  8. jquery插件图片延时加载实例详解

    效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...

  9. dataset的使用和图片延时加载的实现

    首先,先介绍一下关于javascript中dataset属性..html5中可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放.下面是元素应用data属性的一个例子:~~~~~~~~ ...

随机推荐

  1. 活字格Web应用平台学习笔记 8 - 查询记录

    基础教程只剩一点点了,学完算了. 这一课的目标是:查询记录 这个操作的原理很简单,增加一个表格,绑定“部门”那个数据,然后增加一个命令,点击查询. 绑定命令: 完成后的实际界面,查询前面是个下拉框: ...

  2. 一个Web页面的问题分析

    几个月之前我接到一个新的开发任务,要在一个旧的Web页面上面增添一些新的功能.在开发的过程中发现旧的代码中有很多常见的不合适的写法,结合这些问题,如何写出更好的,更规范的,更可维护的代码,就是这篇文章 ...

  3. 【Java入门提高篇】Day21 Java容器类详解(四)ArrayList源码分析

    今天要介绍的是List接口中最常用的实现类——ArrayList,本篇的源码分析基于JDK8,如果有不一致的地方,可先切换到JDK8后再进行操作. 本篇的内容主要包括这几块: 1.源码结构介绍 2.源 ...

  4. 【HANA系列】SAP HANA XS使用Data Services查询CDS实体【二】

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Dat ...

  5. 前端使用 validate , 根据条件进行动态的验证添加

    需求如下: 审核操作的时候,选择“通过” 就不需要验证审核意见,但是选择的是“不通过”,那么需要进行审核意见验证 <script> $(function () { InitValidate ...

  6. 使用 Array2XML把数组转成XML格式,有相同的节点

    最近开发一个项目,需要调用第三方的接口,第三方提供的数据是xml,我直接使用Array2XML把php数组转成XML格式. XML格式如: <root> <body> < ...

  7. apache 80端口占用问题

    今天安装mongodb后发现apache无法启动 命令行 services.msc 打开服务 在服务里启动Apache2a服务,报错误码1 网上查有很多情况都报的1 可以通过命令行下  执行apach ...

  8. ubuntu 14.04安装zabbix3.0以及汉化

    文章出处借鉴于 http://www.cnblogs.com/-10086/p/5317524.html 1.下载deb # wget http://repo.zabbix.com/zabbix/3. ...

  9. MDX 脚本语句 -- Scope

    在多维表达式 (MDX) 中,下列语句用于管理 MDX 脚本中的上下文.作用域和流控制. 主题 说明 calculate语句 计算子多维数据集,还可以确定子多维数据集中所包含的求解次序 case语句 ...

  10. January 22nd, 2018 Week 04th Monday

    It is only when you are pursued that you become swift. 唯有在被追赶的时候,你才能真正地奔跑. It is so bad a feeling wh ...