当前项目使用angular框架，封装了图片懒加载的控件以方便使用。

先看下怎么样使用吧：

加了个lazyload就自动变成懒加载了，是不是很简单，哈哈。以后的项目可有福了，简单易用。

这是封装的部分代码：

@Directive({

  selector: '[lazyload]'

})

export class ImgLazyLoad implements OnInit {

  private imgSourceSrc;

  private imgHoderSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC';

  private srcListenTimeInterval;

  @Input('imgHolder')

  set imgHolder(value: string) {

    this.imgHoderSrc = value;

  }

  @Input()

  public scrollContainer;

  constructor(public element: ElementRef) {

  }

  ngOnInit() {

    this.srcListenTimeInterval = setInterval(c => {

      let com = c as ImgLazyLoad;

      let $element = $(com.element.nativeElement);

      let elementSrc = $element.attr("src");

      if (elementSrc != com.imgHoderSrc && elementSrc != com.imgSourceSrc && elementSrc) {

        console.log("lazyimg inited");

        com.imgSourceSrc = elementSrc;

        console.log("load src" + com.imgSourceSrc)

        $element.attr("src", com.imgHoderSrc)

        $element.attr('data-original', this.imgSourceSrc);

        console.log( com.scrollContainer);

        $(this.element.nativeElement).lazyload({

          effect: 'show',

          container: com.scrollContainer,

        });

        console.log("lazyimg finish");

      }

    }, 100, this);

  }

  ngAfterViewInit() {

  }

  ngOnDestroy() {

    if (this.srcListenTimeInterval) {

      clearInterval(this.srcListenTimeInterval);

    }

  }

}

项目开发组  供稿