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的更多相关文章

  1. Ionic3 UI组件之 ImagePicker

    ImagePicker插件实现设备上的多个图像选择的功能. 组件特性: 统一选择界面,避免不同设备选择界面不一样的问题: 支持多选,并且可以设置最多选择的张数: 选择数量超出设置时会提示: Camer ...

  2. Ionic3 UI组件之 Gallery Modal

    Gallery Modal可以理解为相册的预览界面.可以显示网络图片,也可以显示base64Image. 在这个例子中,我用来实现图片的预览功能. 相机拍照,或者相册选择图片后,用缩略图组件显示缩略图 ...

  3. Ionic3 UI组件之 PhotoViewer

    PhotoViewer是常用的Cordova Plugin之一,用来显示图片. 组件特性: 根据Url显示图片 支持手势,可放大缩小 带分享按钮,可分享图片 带关闭按钮 加载错误时自动关闭组件 支持B ...

  4. Ionic3 UI组件之 ImageViewer

    组件特性: 轻触图片可全屏查看 手势上下滑动可关闭全屏查看 点击导航箭头可关闭视图 双击查看全图,并可放大 参考地址:https://github.com/Riron/ionic-img-viewer ...

  5. Ionic3 UI组件之 autocomplete

    无论是web开发还是app开发,autocomplete是常用组件之一. 可惜截止到目前,ionic官方并未提供此组件. ionic2-autocomplete是GitHub上的开源的Ionic2组件 ...

  6. iOS之UI组件整理

    作者:神兽gcc 授权本站转载. 最近把iOS里的UI组件重新整理了一遍,简单来看一下常用的组件以及它们的实现.其实现在这些组件都可以通过Storyboard很快的生成,只是要向这些组件能够变得生动起 ...

  7. Atitit.web ui  组件化 vs  mvc

    Atitit.web ui  组件化 vs  mvc   组件化  与 mvc并不矛盾..单双方适用的地方有所不同.. React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定 ...

  8. 这是一个比较全的Android UI 组件

     Android组件及UI框架大全 原文地址:http://blog.csdn.net/smallnest/article/details/38658593 Android 是目前最流行的移动操作系统 ...

  9. AngularJs的UI组件ui-Bootstrap分享(一)

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

随机推荐

  1. python——排序

    从学校毕业出来后只知道冒泡排序,发现自己对排序的了解还是很浅显. 于是在网上搜索各种排序方法,以下是本人根据索搜出来的资料再结合自己理解作出的一些简单的阐述. 如果有不正确的地方欢迎大家指正.(共同学 ...

  2. 利用bulk添加百万条数据,进行测试

    (1)连接数据库 public static void BulkToDB(DataTable dt) { //数据库连接 SqlConnection sqlCon = new SqlConnectio ...

  3. ABP框架踩坑记录

    ABP框架踩坑记录 ASP.NET Boilerplate是一个专用于现代Web应用程序的通用应用程序框架. 它使用了你已经熟悉的工具,并根据它们实现最佳实践. 文章目录 使用MySQL 配置User ...

  4. 【Cocos2d-Js基础教学(1)JS -Mac配置篇】

    一.准备工作 Windows配置篇请见 http://cn.cocos2d-x.org/tutorial/show?id=1396 1.安装python 2.下载Android SDK Android ...

  5. pageadmin CMS网站建设教程: 附属表数据列表调用语法

    列表调用语法 Html.SubDataList(参数1,参数2,参数3,参数4)参数说明: 注:第一个参数对象中必须定义Table或ParentTable/ParentField属性.参数1常用属性: ...

  6. win8 下 intellij idea 13 中文输入覆盖的问题

    网上的解决方案好啰嗦,精简下如下: 设置环境变量 64位:IDEA_JDK_64 32位:IDEA_JDK 设置的value必须是JDK1.6(IDEA自带1.7版本有问题),和平时设置的JAVA_H ...

  7. 解决Windows 8.1 应用商店中安装程序挂起的解决

    阅读目录: 在Windows 8.1系统的应用程序商店中安装程序时,总是提醒“挂起”状态.无法进行后续安装,看了下国内不少用户有这个困扰,特此总结自己的解决方案. 1. 确保Windows updat ...

  8. 结合 RunLoop 和 Instrument 定位卡顿

    iOS 应用,丝般顺滑的理想情况就是 60FPS (对于 iPad Pro 是 240FPS),即在 16ms 之内完成一次渲染.如果找到在每次渲染花费了多久,究竟做了什么事情,那么就可以进行针对性的 ...

  9. css实现响应式九宫格效果

    1. 首先看下九宫格的效果图: 2. html代码比较简单,如下: <div class="main"> <div class="box1"& ...

  10. Spring中AOP切面编程学习笔记

    注解方式实现aop我们主要分为如下几个步骤: 1.在切面类(为切点服务的类)前用@Aspect注释修饰,声明为一个切面类. 2.用@Pointcut注释声明一个切点,目的是为了告诉切面,谁是它的服务对 ...