Ionic3 自定义组件实现图片懒加载效果
来源:互联网 发布:淘宝店铺提取软件 编辑:程序博客网 时间:2024/06/04 19:58
在使用ionic3的过程中,我们可以使用angularjs的组件特性进行组件的自定义开发,对一些特定条件下的需求开发对应的组件。
下面我们就通过自定义组件来实现图片的懒加载效果。当我们需要加载的图片很大,但是我们又不愿意做压缩让图片失真,所以我们需要使用图片的懒加载效果。
实现流程
首先新建一个img-lazy-load组件:
ionic g component img-lazy-load
会在src目录下生成一个components文件夹,里面包含img-lazy-load这个组件。
结构如下:
然后主要修改两个地方,一个是img-lazy-load.ts文件,一个是img-lazy-load.html文件
修改后的img-lazy-load.ts文件:
import { Component, Input } from '@angular/core';@Component({ selector: 'img-lazy-load', templateUrl: 'img-lazy-load.html'})export class ImgLazyLoad { default: string = 'assets/images/default.png'; constructor() { } @Input() src: string //要显示的图片 ngOnInit() { let img = new Image(); img.src = this.src; img.onload = () => { //这里为了达到演示效果给了两秒的延迟,实际使用中不需要延迟 setTimeout(() => { this.default = this.src; }, 2000) } }}
修改后的img-lazy-load.html文件
<img src="{{default}}" alt="">
最后在使用的页面引入该组件即可使用。比如我们在home这个页面使用该组件,
那么我们首先在home.module.ts文件中引入组件
@NgModule({ declarations: [ HomePage, ], imports: [ IonicPageModule.forChild(HomePage), ImgLazyLoadModule//引入该组件 ], exports: [ HomePage ]})
然后在home.html即可使用
<img-lazy-load [src]="imgUrl"></img-lazy-load>
这里需要注意,如果我们在ts文件中绑定imgUrl的话就按照上面那样绑定值,如果imgUrl是通过*ngFor绑定的值,就不需要加{{}},如果imgUrl修改为定值的话,比如<img-lazy-load [src]="https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D200/sign=333f3ac494510fb367197097e932c893/a8014c086e061d95df89434571f40ad163d9ca84.jpg"></img-lazy-load>
这样写会抛出异常,解决方案就是将“url地址”改为“’url地址’”
- Ionic3 自定义组件实现图片懒加载效果
- ionic3 实现懒加载方式 ---学习记录
- ionic3 tab实现自定义图片替换字体图标
- 自定义组件---图片和文字实现ImageButton效果
- Ionic3 懒加载
- android 实现图片加载效果
- 升级到ionic3 Lazy Loading懒加载,ionic3新建页面
- ionic3开发系列——ionic3懒加载配置
- Android提高篇之自定义dialog实现processDialog“正在加载”效果、使用Animation实现图片旋转
- Android提高篇之自定义dialog实现processDialog“正在加载”效果、使用Animation实现图片旋转
- Android提高篇之自定义dialog实现processDialog“正在加载”效果、使用Animation实现图片旋转
- 自定义组件实现跑马灯效果
- dql组件结果页面实现自定义效果
- ionic2/ionic3自定义Action Sheets和Alerts组件的样式
- 实现圆形加载中效果自定义Dialog
- android 自定义view实现进度条加载效果
- 自定义view实现圆形加载效果
- ionic3新特性懒加载,lazyloading
- [Unity&GameSparks]如何使用TwitchConnectRequest连接账号
- SuperMap iClient3D for WebGL产品包更新--201706
- 程序员找工作那点事儿
- 序列化Gson
- 微信前端开发接口一览
- Ionic3 自定义组件实现图片懒加载效果
- API防重放机制
- 电脑中如何在cmd中正确使用cd命令切换文件目录
- 如何理解矩阵特征值?
- No enclosing instance of type Multh is accessible. Must qualify the allocati
- PHP中PDO解决中文乱码
- 读取dat文件
- 怎样使得Tomcat服务器启动更快 使用随机数与熵池策略
- Android Touch事件的传递机制