Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import { Directive, ElementRef, Input, OnChanges, SimpleChanges } from '@angular/core';
@Directive({
selector: '[lazy-load]' // Attribute selector
})
export class LazyLoadDirective implements OnChanges {
@Input('source')
source;
lazyImageObserver: any;
constructor(private el: ElementRef) {}
ngOnChanges(changes: SimpleChanges) {
if (changes.source) {
this.observeAndLazyLoadImages(this.el.nativeElement);
}
}
private observeAndLazyLoadImages(lazyImage: Element) {
const intersectionObsPresent = "IntersectionObserver" in window;
if (intersectionObsPresent) {
if (this.lazyImageObserver) {
this.lazyImageObserver.unobserve(lazyImage);
this.lazyImageObserver = null;
}
this.lazyImageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
this.setImageSrcFromDataset(entry.target);
this.lazyImageObserver.unobserve(entry.target);
this.lazyImageObserver = null;
}
});
});
this.lazyImageObserver.observe(lazyImage);
} else {
// Since IntersectionObserver is not supported by the browser
// we will load all images right away
this.setImageSrcFromDataset(lazyImage);
}
}
private setImageSrcFromDataset(imageTag) {
imageTag.src = this.source;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.