Ionic2 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>

时间: 2024-09-28 21:57:18

Ionic2 UI组件之 ImageLoader的相关文章

Ionic2 UI组件之 ImageViewer

组件特性: 轻触图片可全屏查看 手势上下滑动可关闭全屏查看 点击导航箭头可关闭视图 双击查看全图,并可放大 参考地址:https://github.com/Riron/ionic-img-viewer ============================================================== 1)npm install --save ionic-img-viewer 2)在app.module.ts文件中增加:import { IonicImageViewerM

Android UI组件进阶(2)——仿Windows对话框

Android UI组件进阶(2)--仿Windows对话框 在开始本章前先祝大家中秋节快乐哈,相信很多上班的朋友都是放三天假的哈! 有时间的话回家陪陪父母吧!树欲静而风不止,子欲养而亲不待!岁月不饶人! 好了,道理和祝福语就说到这里了,今天给大家准备的是模仿Windows风格对话框! 效果图: 相信大部分的AlertDialog都是下面这个样子的: 今天给大家讲解的对话框是下面这样的: 对比两种对话框,站在用户的角度,相信你更加钟情于第二种颜色鲜明的对话框 好了下面就开始讲解如何制作模仿win

React-Native入门指南(五)——UI组件

React-Native入门指南 github:https://github.com/vczero/react-native-lession React-Native:用JavaScript开发你的原生应用,释放Native的UI体验,体验 Hybird开发效率. 最近一个星期写的文章如下: 第1篇hello react-native 第2篇认识代码结构 第3篇css和布局 第4篇学会react-native布局 第5篇ui组件 还有几篇需要这这周完成(这块会时刻更新): 第6篇JSX语法 第7

推荐使用Tiny Framework web开发UI组件

TINY FRAMEWORK 基于组件化的J2EE开发框架,from:http://www.tinygroup.org/ 名字 Tiny名称的来历 取名Tiny是取其微不足道,微小之意. Tiny的构建者认为,一个J2EE开发框架是非常复杂的,只有把框架分解成非常细小.可控的部分,并且对每个细小.可控的部分都有一个最优解或相对最优解, 那么整个方案也就可以非常不错的落地. 策略 Tiny框架的构建策略 Think big, start small, scale fast. 想法要宏伟,但是要从小

布局技巧1:创建可重用的UI组件(include标签)

Android平台提供了大量的UI构件,你可以将这些小的视觉块(构件)搭建在一起,呈现给用户复杂且有用的画面.然而,应用程序有时需要一些高级的视觉组件.为了满足这一需求,并且能高效的实现,你可以把多个标准的构件结合起来成为一个单独的.可重用的组件. 例如,你可以创建一个可重用的组件包含一个进度条和一个取消按钮,一个Panel包含两个按钮(确定和取消动作),一个Panel包含图标.标题和描述等等.简单的,你可以通过书写一个自定义的View来创建一个UI组件,但更简单的方式是仅使用XML来实现. 在

微信小程序UI组件、开发框架、实用库

UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wemark ★85 - 微信小程序Markdown渲染库 WeZRender ★36 - 微信小程序Canvas增强组件 wetoast ★21 - 仿照微信小程序提供的showToast功能 wxapp-charts ★20 - 微信小程序图表charts组件 WeiXinProject ★18 - 列

推荐 11 款 React Native 开源移动 UI 组件

推荐 11 款 React Native 开源移动 UI 组件 oschina 发布于 10个月前,共有 14 条评论 本文推荐 11 个非常棒的 React Native 开源组件,希望能给移动应用开发者提供帮助. React Native 是近期 Facebook 基于 MIT 协议开源的原生移动应用开发框架,已经用于 Facebook 的生产环境.React Native 可以使用最近非常流行的 React.js 库来开发 iOS 和 Android 原生 APP. 1. iOS 表单处理

前端UI组件复用工具

"懒"是第一生产力. 代码复用总是程序员喜闻乐见的,前端组件化的最终目的就是复用,今天我们就将深入探讨如何实现UI组件的复用. 通常我们所说的组件往往是包含业务逻辑的前端组件,而这类组件实际上很难实现广义上的复用,顶多能在同一条业务线上复用一下,但UI组件就不一样了,没有了业务的约束,只在UI层面上实现复用,那想象空间就很大了,所以这里我们只讨论UI组件. 首先界定一下,UI组件就是一个web界面的前端代码片段,虽然说不包含业务,但基本的JS效果是可以有的,比如表单验证.轮播图效果.选

封装一个简单的UI组件

方法其实很简单,用一个函数把整个过程包起来.调用时用new,这样可以在一个页面使用多个改组件.这是一个非常简单的方法,后面还有很大改进的空间.下面是一个封装日历的示例. 现在我们的组件类似bootstrap,写好下面的html结构,然后引入ui.css和ui.js,就可以生成相应的UI组件了.效果如上图. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>C