@trendster-io/ng-lazy-image
Version:
An Angular directive to efficiently lazy load images using the IntersectionObserver API.
2 lines • 2.13 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core")):"function"==typeof define&&define.amd?define("@trendster-io/ng-lazy-image",["exports","@angular/core"],e):e(((t=t||self)["trendster-io"]=t["trendster-io"]||{},t["trendster-io"]["ng-lazy-image"]={}),t.ng.core)}(this,function(t,e){"use strict";var o=function(){function t(t){this.el=t,this.willLoad=new e.EventEmitter,this.decodingAttr="async"}return Object.defineProperty(t.prototype,"visibilityStyle",{get:function(){return this.srcAttr?"visible":"hidden"},enumerable:!0,configurable:!0}),t.prototype.ngOnChanges=function(t){t.src&&t.src.currentValue&&this.addIO()},t.prototype.ngOnDestroy=function(){this.io&&this.removeIO()},t.prototype.canLazyLoad=function(){return"undefined"!=typeof window&&"IntersectionObserver"in window},t.prototype.load=function(){this.srcAttr=this.src,this.willLoad.emit()},t.prototype.lazyLoadImage=function(){var t=this;this.io&&this.removeIO(),this.io=new IntersectionObserver(function(e){e[0].isIntersecting&&(t.load(),t.removeIO())},{root:this.root,rootMargin:this.rootMargin,threshold:this.threshold}),this.io.observe(this.el.nativeElement)},t.prototype.loadImage=function(){var t=this;setTimeout(function(){return t.load()},200)},t.prototype.addIO=function(){this.canLazyLoad()?this.lazyLoadImage():this.loadImage()},t.prototype.removeIO=function(){this.io.disconnect(),this.io=null},t.decorators=[{type:e.Directive,args:[{selector:"img[lazy]"}]}],t.ctorParameters=function(){return[{type:e.ElementRef}]},t.propDecorators={src:[{type:e.Input}],root:[{type:e.Input}],rootMargin:[{type:e.Input}],threshold:[{type:e.Input}],willLoad:[{type:e.Output}],srcAttr:[{type:e.HostBinding,args:["attr.src"]}],decodingAttr:[{type:e.HostBinding,args:["attr.decoding"]}],visibilityStyle:[{type:e.HostBinding,args:["style.visibility"]}]},t}(),i=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{declarations:[o],exports:[o]}]}],t}();t.LazyImageDirective=o,t.LazyImageModule=i,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=trendster-io-ng-lazy-image.umd.min.js.map