图片懒加载imglazyload之ioniclazyload的使用和介绍
2016-06-02 11:24
447 查看
对于什么是图片的懒加载,我想这个大家都比较了解的
也就是在页面上图片比较多的时候,打开一张页面必然引起与服务器大数 据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条 下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。
首先我们需要下载ionic-image-lazy-load.js文件,然后在index文件中引入。
然后再app.js文件中注入下
然后再需要有图片懒加载的页面中加入申明:lazy-scroll
这些准备工作都做好了以后,就是使用imgLazyLoad了
当然我们也可以把这个图片设置为背景图片
当然我们也可以设置$ionicScrollDelegate的resize属性
在加载图片出现图片之前的时候我们也可以在界面上给个加载图标
除了lines属性,还有另外的几种都可以随意的设置
页面中的图片什么时候开始加载也是可以设置的:
设置当距离底部或者右边多少距离的时候开始加载这个图片
对于ionic-image-lazy-load的实现比较简答。大致也就这么几种功能。简单容易上手。
转自:http://my.oschina.net/Nealyang/blog/548462
也就是在页面上图片比较多的时候,打开一张页面必然引起与服务器大数 据量的交互。尤其是对于高清晰的图片,占的几M的空间。ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条 下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升。
首先我们需要下载ionic-image-lazy-load.js文件,然后在index文件中引入。
然后再app.js文件中注入下
angular.module('yourapp', ['ionic', 'ionicLazyLoad'])
然后再需要有图片懒加载的页面中加入申明:lazy-scroll
这些准备工作都做好了以后,就是使用imgLazyLoad了
<img image-lazy-src="{{imgSrc }}">
当然我们也可以把这个图片设置为背景图片
<div image-lazy-src="{{imgSrc }}" image-lazy-background-image="true"></div>
当然我们也可以设置$ionicScrollDelegate的resize属性
<img image-lazy-src="{{imgSrc }}" lazy-scroll-resize="true">
在加载图片出现图片之前的时候我们也可以在界面上给个加载图标
<img image-lazy-src="{{imgSrc }}" image-lazy-loader="lines">
除了lines属性,还有另外的几种都可以随意的设置
页面中的图片什么时候开始加载也是可以设置的:
设置当距离底部或者右边多少距离的时候开始加载这个图片
<img image-lazy-src="{{imgSrc }}" image-lazy-distance-from-bottom-to-load="100"> <img image-lazy-src="{{imgSrc }}" image-lazy-distance-from-right-to-load="100">
对于ionic-image-lazy-load的实现比较简答。大致也就这么几种功能。简单容易上手。
转自:http://my.oschina.net/Nealyang/blog/548462
相关文章推荐
- springmvc笔记
- 关于chrome下的bug
- SVN switch 用法详解
- 购买图书
- Android Studio中如何更改JDK和SDK的路径
- HADOOP 开发环境的配置
- jquery知识小结
- 跨行清算系统原理
- redis哨兵(sentinel)系统
- Android开发中一些琐碎的小功能的实现
- blogs
- VLAN端口属性详解
- (视频)Erich Gamma 与 Visual Studio Online 的一点野史
- 【linux】man和--help
- JAVA解析XML文件
- SpringMVC和MyBatis整合时
- supervisor设置环境变量
- Unity Android加密DLL笔记
- Linux系统(Ubuntu/Debian/RedHat/CentOS)超级简单的samba配置文件smb.conf
- java编码规范