angularjs图片懒加载

起源

注册CSDN账号很多年了，一直没写什么东西，平时的一些东西都写在云笔记，最近闲来无事，把一些东西搬运过来，回顾一下，顺便交流一下

为什么需要懒加载

页面图片太多，如果页面加载的时候把所有图片都加载下来，影响页面加载速度，在流量宝贵的时代（当然不是现在），即浪费用户流量，又影响用户体验

懒加载原理

img的src先不设置，设置一个属性用于存放图片的URL,滚动屏幕的时候判断图片到浏览器下边框的距离，如果低于设定值，就把src属性设置成图片的地址。

代码

//<img [Lazyload] src="" height="100" width="100" data-src="images/brand.jpg">
import { Directive, ElementRef, HostListener, Input, Renderer, AfterViewInit } from '@angular/core';
@Directive({
    selector: '[lazyLoadImg]'
})
export class LazyloadDirective implements AfterViewInit{
    private _defaultColor = 'red';
    constructor(private el: ElementRef, private renderer: Renderer) {

    }

    ngAfterViewInit() {
        this.onWindowScroll();
    }

    @HostListener('window:scroll')
    onWindowScroll(){
        var offsetTop = this.getH(this.el.nativeElement);
        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        var t = document.documentElement.clientHeight +
    scrollTop;
        if(offsetTop < t){
            if(this.el.nativeElement.dataset){
                this.el.nativeElement.src = this.el.nativeElement.dataset.src;
            }else{
                this.el.nativeElement.src = this.el.nativeElement.dataset.getAttribute('data-src');
            }
        }
        //this.el.nativeElement.appendChild('')
        //console.log(this.el.nativeElement,offsetTop,t);
    }
    private highlight(color: string) {
        //console.log(this.el.nativeElement.offsetHeight)
        this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
    }

//计算元素距离顶部高度
    getH(obj) {
        var h = 0;
        while (obj) {
            h += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return h;
    }
}