美文网首页Ionic
Ionic3 自定义组件实现图片懒加载效果

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

作者: 待花谢花开 | 来源:发表于2017-06-15 08:46 被阅读172次

    在使用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文件

    ![]({{default}})
    

    最后在使用的页面引入该组件即可使用。比如我们在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地址'”*

    相关文章

      网友评论

      • poison771:home.module 不需要引入组建吗
        待花谢花开:需要啊
      • 漂在海上的风筝:这个自定义组件思路很好,但是我想问下你现在这种写法和浏览器自己加载有什么区别?懒加载不是应该根据距浏览器顶部高度判断是否需要加载吗?
        待花谢花开:@漂在海上的风筝 ionic3也有popover啊 或者你可以自己写组件
        漂在海上的风筝:@待花谢花开 恩,了解了。我现在想做一个类似ionic1中的popup自定义内容弹窗,但是ionic3没有直接可以用的组件,有什么好建议吗?
        待花谢花开:@漂在海上的风筝 浏览器自己加载,当图片没有加载出来的时候那里的不会出现任何东西,而用到懒加载就可以在加载出来之前用一张默认图片去占位

      本文标题:Ionic3 自定义组件实现图片懒加载效果

      本文链接:https://www.haomeiwen.com/subject/plryqxtx.html