Ionic3 自定义组件实现图片懒加载效果

最新推荐文章于 2024-04-27 09:47:27 发布

花开花又谢

最新推荐文章于 2024-04-27 09:47:27 发布

阅读量6.1k

点赞数

分类专栏： ionic2 文章标签： ionic3 自定义组件图片懒加载 lazyload

本文链接：https://blog.csdn.net/u010730897/article/details/73224725

版权

ionic2 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

在使用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地址’”