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>
基本功能就这样,至于其他的延迟效果,需要时再看
Ionic 图片延时加载的更多相关文章
- picLazyLoad 图片延时加载,包含背景图片
/** * picLazyLoad 图片延时加载,包含背景图片 * $(img).picLazyLoad({...}) * data-original 预加载图片地址 * alon */ ;(func ...
- 图片延时加载jquery.inview.js用法详解
我们在网站上总能见到这样的效果,若是有图片,图片都是先用loading加载一小段时间,然后紧接着出来要显示的图片,即效果如下: v2_loading.gif,几秒钟时间过渡到v2_pic_01_s.j ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
- 一段实现页面上的图片延时加载的js
大家如果使用firebug去查看的话就会发现,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较 ...
- js实现网页图片延时加载的原理和代码 提高网站打开速度
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- js实现图片延时加载的原理
实现原理: 附:(http://www.cnblogs.com/fishtreeyu/archive/2011/03/12/1982067.html) 把所有需要延时加载的图片改成如下的格式: < ...
- [转载]jQuery.lazyload详解 - 图片延时加载
jQuery实现图片延迟加载,不知道是否可以节省带宽呢?有人知道吗? 这究竟只是一个视觉特效还是真的能延迟加载减少服务器的请求呢? <script type="text/javascr ...
- jquery插件图片延时加载实例详解
效果预览:http://keleyi.com/keleyi/phtml/image/index.htm 使用方法:1.导入JS插件 <script src="http://keleyi ...
- dataset的使用和图片延时加载的实现
首先,先介绍一下关于javascript中dataset属性..html5中可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放.下面是元素应用data属性的一个例子:~~~~~~~~ ...
随机推荐
- Linux 设备树的解释 - DTB文件格式【转】
https://blog.csdn.net/cc289123557/article/details/51782449 1.dtb文件格式 dtb文件的格式如下图 : NOTE:不同部分顺序可能不一样 ...
- sysfs_create_group创建sysfs接口
在调试驱动,可能需要对驱动里的某些变量进行读写,或函数调用.可通过sysfs接口创建驱动对应的属性,使得可以在用户空间通过sysfs接口的show和store函数与硬件交互: Syss接口可通过sys ...
- NFS常见问题
问题一:取消挂载失败 问题现象: umount /opt/data umount.nfs: /opt/data: device is busy umount.nfs: /opt/data: devic ...
- 使用parted创建gpt大分区例子
[root@VM000000518 ~]# parted /dev/xvde GNU Parted 2.1 Using /dev/xvde Welcome to GNU Parted! Type 'h ...
- Git永久删除文件和历史记录
目录 Git永久删除文件和历史记录 使用filter-branch 添加到.gitignore文件里并push修改后的repo 清理和回收空间 Git永久删除文件和历史记录 造成你想从git存储库中永 ...
- Windows Server 2008 R2终端服务器激活方法
本文描述了如何激活Windows Server 2008 R2的终端服务器的方法. 目录: 1.Windows Server 2008 R2终端服务器的安装 2.Windows Server 20 ...
- RESTframework简介
什么是RESTful? RESTful是一种开发理念,REST是Roy Thomas Fileding在他博文提出的.REST特点;url简洁,将参数通过url传递到服务器,简单就是说URL定位资源, ...
- apache配置CA证书通过https通信
Apache Httpd 2.2 实现https加密通讯 实际生产中CA证书一般是向一些专业认证的国际机构来进行申请的.我们会模拟使用OpenSSL生成的证书,来实现Apache的安全加密通讯,这与实 ...
- Shell的基础介绍和案例
一.shell脚本基础 1.第一个脚本 vim first.sh 分别使用三种方法可以执行脚本: ./first.sh (需要有可执行的权限) sh first.sh . fir ...
- 2018. first week now at home
外面雪刚停. 现在是2018.1.5 2018 needs to consider next steps了.未雨绸缪啊 下面是2017年last working day 外面黑了,水面上黑 ...