Angular2 图片延迟加载组件

简介

在最近的一个项目中，遇到了在一个页面需要加载很多张图片，但是用户基本上是移动网络，校园网络,
于是打算使用图片延迟加载技术。

注意，我的案例是在 `ul` `li` 中进行，没有使用 `img`, 我的图片是作为背景图片加载。

第一版

因为是第一次造轮子，所以还没有参考 jquery lazyload

思路

  • 创建一个指令针对每个li元素。
  • 在每个指令中监听 window 或者 li 元素的 parent 的 scroll 事件。
  • 判断每个li元素的offsetTop值，与当前的滚动距离(scrollTop)和当前屏幕(ul的绝对高度)。
  • 选择性的更新远程图片，并标注该图片已加载，不要重复加载远程图片。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// lazyload.directive.ts
import { Directive, Input, ElementRef, Renderer, HostListener, OnDestroy, AfterViewInit } from '@angular/core';
@Directive({
    selector: '[lazy-load]'
})
export class LazyloadDirective implements AfterViewInit, OnDestroy {
    @Input('lazy-load') data: string;
    @Input('parent') typeName: string = 'window';
    private parent: HTMLElement | Window = window;
    private callback: (event) => void;
    private target: HTMLElement;
    private isLoaded: boolean = false;
    constructor(private el: ElementRef, private renderer: Renderer) {
        this.callback = (event) => {
            if (!this.isLoaded) {
                this.onScroll(event);
            }
        };
    }
    ngOnDestroy() {
        this.parent.removeEventListener('scroll', this.callback, false);
    }
    ngAfterViewInit() {
        this.target = this.el.nativeElement;
        if (this.typeName === 'window') {
            this.parent = window;
        } else {
            this.parent = document.querySelector(this.typeName) as HTMLElement;
        }
        this.parent.addEventListener('scroll', this.callback, false);
        // 因为第一次进入不会触发滚动事件，因此手动触发
        this.onScroll('');
    }
    onScroll(event) {
        let distance = this.parent['scrollTop'] || this.parent['screenY'] || 0,
            viewHeight = this.parent['clientHeight'] || this.parent['innerHeight'] || 0,
            fold = distance + viewHeight;
        if (fold >= this.target.offsetTop) {
            this.isLoaded = true;
            this.renderer.setElementStyle(this.target, 'backgroundImage', this.data);
        }
    }
}
1
2
3
4
5
6
7
<!-- index.html 这里是代码片段-->
<ul class="parent">
    <li *ngFor="let page of pages; let idx = index;" [lazy-load]='page.imageUri' [parent]="'ul.parent'" [ngClass]="{'active': currentPage === idx}">
        <span class="pagenum">{{idx+1}}</span>
    </li>
    <li class="page-add" (click)="createPage()"></li>
</ul>

问题

在少量的图片时，效果还是很显著的。但是当图片一多时，卡顿非常明显。

分析

  • 事件的重复监听。

    很明显我们这里的每个li都会执行一个指令，每个指令都又重复监听scroll事件。

  • Dom 的多次查询和操作。

    因为每个指令都监听了scroll事件，因此每次滚动都没批量级的查询dom和操作dom。

第二版

基于第一次的问题，做出了以下更改。

  • 将指令针对父级节点，可以减少事件的监听。

  • 减少 dom 的查询和操作。

  • 将背景图片地址绑定到data-origin属性上。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// lazyload.directive.ts
import { Directive, Input, ElementRef, Renderer, HostListener, OnDestroy, AfterViewInit, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
@Directive({
    selector: '[lazy-load]'
})
export class LazyloadDirective implements AfterViewInit, OnDestroy, OnChanges {
    @Input('lazy-child') childName: string;
    private callback: (event) => void;
    private target: HTMLElement;
    private childs: NodeListOf<Element>;
    constructor(private el: ElementRef, private renderer: Renderer) {
        this.callback = (event) => {
            this.onScroll(event);
        };
    }
    ngOnDestroy() {
        this.target.removeEventListener('scroll', this.callback, false);
    }
    ngAfterViewInit() {
        this.target = this.el.nativeElement;
        this.childs = this.target.querySelectorAll(this.childName);
        this.target.addEventListener('scroll', this.callback, false);
        // 因为 ng2 渲染 dom 需要时间，但是没有渲染的事件返回， 因此在这里使用延时器，针对第一次加载
        setTimeout(() => {
            this.onScroll('');
        }, 60);
    }
    onScroll(event) {
        // 在这里动态查询 dom 因为在业务逻辑中，dom 是会被添加的
        this.childs = this.target.querySelectorAll(this.childName);
        let length = this.childs.length;
        for (let i = 0; i < length; i++) {
            let item = this.childs.item(i),
                data = item.getAttribute('data-origin'),
                top = (item as HTMLElement).offsetTop;
            if (!this.isBelow(top)) {
                if (data) {
                    (item as HTMLElement).style.cssText = `background-image: url('${data}');`;
                }
            }
        }
    }
    /**
     * 判断当前节点是否在界面下方
     * 
     * @param {number} top
     * @returns {boolean}
     * 
     * @memberOf LazyloadDirective
     */
    isBelow(top: number): boolean {
        let distance = this.target.scrollTop,
            viewHeight = this.target.clientHeight,
            fold = distance + viewHeight;
        return fold < top;
    }
}
1
2
3
4
5
6
7
<!-- index.html -->
    <ul lazy-load [lazy-child]="'.li-page'">
        <li *ngFor="let page of pages; let idx = index;" class="li-page" [ngClass]="{'active': currentPage === idx}" [attr.data-origin]="page.imageUri">
            <span class="pagenum">{{idx+1}}</span>
        </li>
        <li class="page-add" (click)="createPage()"></li>
    </ul>

效果表现

  • 可以达到正常的dom在视窗中时，才被加载。
  • 在一定数量级的图片时，不会有很明显的卡顿现象。

问题

  • 无法针对 window 的 scroll 事件。
  • 当频繁切换界面时，一但浏览器禁用缓存，那么背景图片就会重新加载，造成资源浪费。

第三版

主要解决缓存问题.

前提

  • 浏览器禁用了图片缓存。
  • 有多个 pages 可以切换显示。

分析

  • 缓存图片

    将远程的图片，转换成 base64 存储到本地。

  • 动态将 图片base64 赋给 li 元素的背景图片。

    需要解决的问题，因为图片转换成base64后，会有变成很多字符，全部展示在dom上，会很卡顿。

  • 隐藏不可见区域的背景图片。

    隐藏不在当前区域的图片。

代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
// lazyload.directive.ts
import { Directive, Input, ElementRef, Renderer, HostListener, OnDestroy, AfterViewInit, OnChanges, SimpleChanges, Output, EventEmitter } from '@angular/core';
@Directive({
    selector: '[lazy-load]'
})
export class LazyloadDirective implements AfterViewInit, OnDestroy, OnChanges {
    @Input('lazy-child') childName: string;
    // 添加一个刷新的情况，因为每次切换 pages, angular2 需要渲染dom.需要一定的时间。
    @Input('lazy-init') refresh: boolean;
    // 事件通知，告知外部已刷新
    @Output('over') refreshed = new EventEmitter();
    private callback: (event) => void;
    private target: HTMLElement;
    private childs: NodeListOf<Element>;
    // 按照图片存储 base64编码.
    private cache: Map<string, string>;
    private urlReg: RegExp = /^url\(\"([\w\W]*)\"\)$/;
    private canvas: CanvasRenderingContext2D;
    constructor(private el: ElementRef, private renderer: Renderer) {
        this.cache = new Map<string, string>();
        this.callback = (event) => {
            this.onScroll(event);
        };
    }
    ngOnDestroy() {
        this.target.removeEventListener('scroll', this.callback, false);
    }
    ngAfterViewInit() {
        this.target = this.el.nativeElement;
        this.childs = this.target.querySelectorAll(this.childName);
        this.target.addEventListener('scroll', this.callback, false);
        let canvas = document.createElement('canvas');
        this.canvas = canvas.getContext('2d');
        this.onScroll('');
    }
    ngOnChanges(simple: SimpleChanges) {
        if (simple['refresh']) {
            if (simple['refresh'].currentValue === true) {
                // 每次当dom加载好时，触发滚动获取图片，被通知外部已刷新。
                setTimeout(() => {
                    this.onScroll('');
                    this.refreshed.emit();
                }, 60);
            }
        }
    }
    onScroll(event) {
        this.childs = this.target.querySelectorAll(this.childName);
        let length = this.childs.length;
        for (let i = 0; i < length; i++) {
            let item = this.childs.item(i),
                data = item.getAttribute('data-origin'),
                top = (item as HTMLElement).offsetTop,
                style = item.attributes.getNamedItem('style');
            if (this.isBelow(top)) {
                // 在界面下方时，第一个有远程图片属性，但是没有style时，就不用再操作 dom 直接结束。
                if (data && !style) {
                    break;
                } else if (style) {
                    item.attributes.removeNamedItem('style');
                }
            } else if (this.isAbove(top)) {
                // 在界面上方时，因为不可见了，直接移除 style 属性。
                if (style) {
                    item.attributes.removeNamedItem('style');
                }
            } else {
                if (data && !this.cache.has(data)) {
                    let image = new Image();
                    image.onload = (e) => {
                        // 这里使用 canvas 对象来将 image 转换成base64.
                        // 注意，这里一定要设定 canvas 的大小成图片的大小。
                        // 不然，转换成的图片会有很大或者一部分的透明区域。
                        this.canvas.canvas.width = image.naturalWidth;
                        this.canvas.canvas.height = image.naturalHeight;
                        this.canvas.drawImage(image, 0, 0);
                        let baseData = this.canvas.canvas.toDataURL();
                        this.cache.set(data, baseData);
                        (item as HTMLElement).style.cssText = `
                            background-image: url('${baseData}');
                        `;
                    };
                    if (this.urlReg.test(data)) {
                        image.crossOrigin = 'Anonymous';
                        image.src = data.match(this.urlReg)[1];
                    }
                } else if (this.cache.has(data)) {
                    (item as HTMLElement).style.backgroundImage = `url('${this.cache.get(data)}')`;
                }
            }
        }
    }
    /**
     * 判断当前节点是否在界面下方
     * 
     * @param {number} top
     * @returns {boolean}
     * 
     * @memberOf LazyloadDirective
     */
    isBelow(top: number): boolean {
        let distance = this.target.scrollTop,
            viewHeight = this.target.clientHeight,
            fold = distance + viewHeight;
        return fold < top;
    }
    /**
     * 判断当前节点是否在界面上方
     * 
     * @param {number} top
     * @returns {boolean}
     * 
     * @memberOf LazyloadDirective
     */
    isAbove(top: number): boolean {
        let distance = this.target.scrollTop;
        return distance > top;
    }
}
1
2
3
4
5
6
7
<!-- index.html -->
<ul lazy-load [lazy-child]="'.li-page'">
    <li *ngFor="let page of pages; let idx = index;" class="li-page" [ngClass]="{'active': currentPage === idx}" [attr.data-origin]="page.imageUri">
        <span class="pagenum">{{idx+1}}</span>
    </li>
    <li class="page-add" (click)="createPage()"></li>
</ul>

总结

经过这三版的延迟加载，要制作一个高效率的组件。一定要：

- 减少事件的重复监听
- 减少直接对dom的查询和操作。

扫一扫，分享到微信

微信分享二维码
返回顶部

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

I'm a computer programer.<br><br>Cease to struggle and you cease to live.<br>生命不息，奋斗不止