Ionic3 UI组件之 ImageLoader
ImageLoader:通过后台线程加载图片(异步)并缓存。类似于Glide或者Picasso。
组件特性:
- 后台线程下载图片,下载速度更快,不使用webview的资源;
- 缓存图像。图像将在您下次显示时立即显示,因为它们已保存在本地存储区,而不是每次都去服务器请求;
- 可显示加载进度条,也可关闭;
- 可设置最大缓存大小并自动删除旧图像;
- 服务器图像不存在时允许设置一个默认图像;
参考地址:https://github.com/zyra/ionic-image-loader
==========================================================
1)安装包:npm install --save ionic-image-loader
2)安装包和插件:npm i --save @ionic-native/file
ionic cordova plugin add cordova-plugin-file
npm i --save @ionic-native/transfer
ionic cordova plugin add cordova-plugin-file-transfer
3)在app.module.ts文件中添加:import { IonicImageLoader } from 'ionic-image-loader';
添加:IonicImageLoader.forRoot();
4)Then add IonicImageLoader in your child/shared module(s)???
5)使用组件:<img-loader src="https://path.to/my/image.jpg"></img-loader>
<img-loader src="https://path.to/my/image.jpg" useImg></img-loader>
第一次加载需要网络,加载成功后图片被缓存,断网后仍然可以加载图片。
Ionic3 UI组件之 ImageLoader的更多相关文章
- Ionic3 UI组件之 ImagePicker
ImagePicker插件实现设备上的多个图像选择的功能. 组件特性: 统一选择界面,避免不同设备选择界面不一样的问题: 支持多选,并且可以设置最多选择的张数: 选择数量超出设置时会提示: Camer ...
- Ionic3 UI组件之 Gallery Modal
Gallery Modal可以理解为相册的预览界面.可以显示网络图片,也可以显示base64Image. 在这个例子中,我用来实现图片的预览功能. 相机拍照,或者相册选择图片后,用缩略图组件显示缩略图 ...
- Ionic3 UI组件之 PhotoViewer
PhotoViewer是常用的Cordova Plugin之一,用来显示图片. 组件特性: 根据Url显示图片 支持手势,可放大缩小 带分享按钮,可分享图片 带关闭按钮 加载错误时自动关闭组件 支持B ...
- Ionic3 UI组件之 ImageViewer
组件特性: 轻触图片可全屏查看 手势上下滑动可关闭全屏查看 点击导航箭头可关闭视图 双击查看全图,并可放大 参考地址:https://github.com/Riron/ionic-img-viewer ...
- Ionic3 UI组件之 autocomplete
无论是web开发还是app开发,autocomplete是常用组件之一. 可惜截止到目前,ionic官方并未提供此组件. ionic2-autocomplete是GitHub上的开源的Ionic2组件 ...
- iOS之UI组件整理
作者:神兽gcc 授权本站转载. 最近把iOS里的UI组件重新整理了一遍,简单来看一下常用的组件以及它们的实现.其实现在这些组件都可以通过Storyboard很快的生成,只是要向这些组件能够变得生动起 ...
- Atitit.web ui 组件化 vs mvc
Atitit.web ui 组件化 vs mvc 组件化 与 mvc并不矛盾..单双方适用的地方有所不同.. React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定 ...
- 这是一个比较全的Android UI 组件
Android组件及UI框架大全 原文地址:http://blog.csdn.net/smallnest/article/details/38658593 Android 是目前最流行的移动操作系统 ...
- AngularJs的UI组件ui-Bootstrap分享(一)
最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...
随机推荐
- 拒绝“高冷”词汇!初学C#中的委托
有一天,你写了好多好多带“形参”的构造函数(就是“方法”,同义),而且需要向这些构造函数里传递同样的“实参”,然后你就憨憨地一个一个函数的调用并赋予同样的“实参”,这一天就这么过去了... 又过了几天 ...
- AbpZero之企业微信---登录(拓展第三方auth授权登录)---第一步:查看AbpZero的auth第三方登录的底层机制
在AbpZero框架中,auth登录接口位于Web.Core库下的Controllers文件夹的TokenAuthController.cs的ExternalAuthenticate方法 Extern ...
- NET 读取Word文档信息
1.添加程序集引用:WindowsBase 2.添加nuget:DocumentFormat.OpenXml 3.代码: var wordPath = @"C:\xxx.docx" ...
- 发起一个NetCore技术联盟促进NetCore技术应用
一.简介 1.从十几年前开始net,到两年前转java,到去年底发现netcore2这玩艺,从此以后坚定成为netcore的追随着. 2.有心促进netcore的应用,聚集一些人员共同学习,减少技术使 ...
- fast powf
测试结果: sum (fast) in clock 1562sum (fast2) in clock 1407sum (fast3) in clock 3156sum in clock 7797Err ...
- selenium下拉框踩坑埋坑
本文来自网易云社区 作者:王利蓉 最近web端全站重构,所有的页面都大大小小都有些变动,UI就全军覆没了,用例从登录改,改到个人信息页面发现根以前的实现方式完全不一样,这可怎么解决 1.以前的实现(o ...
- MySQL(ORM框架)
day63 参考:http://www.cnblogs.com/wupeiqi/articles/5713330.html SQLAlchemy本身无法操作数据库,其必须以来pymsql等第三方插件, ...
- 使用过Memcache缓存吗?如果使用过,能够简单描述下其工作原理吗?
Memcache是把所有数据保存在内存中,采用hash表的方式,每条数据由key和value组成,每个key独一无二的.Memcache采用LRU算法逐渐把过期数据清除掉.
- [Angular 6] 初学angular,环境全部最新,[ ng serve ] 不能启动,卡在 95% 不动 => 解决方案
2018.9.7 问题描述: 通过ng serve命令启动angular应用时,卡在95%, ctrl+c 停掉后看到错误内容为找不到ng_modules下的angular模块下的package.js ...
- 《JAVA与模式》之适配器模式
在阎宏博士的<JAVA与模式>一书中开头是这样描述适配器(Adapter)模式的: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能 ...