Skip to content

Instantly share code, notes, and snippets.

@realtomaszkula
Last active June 3, 2018 20:03
Show Gist options
  • Save realtomaszkula/081d0ebab30aa7c5b98c7b583fd7d244 to your computer and use it in GitHub Desktop.
Save realtomaszkula/081d0ebab30aa7c5b98c7b583fd7d244 to your computer and use it in GitHub Desktop.
@Directive({
selector: 'img[appLazyLoad]'
})
export class LazyLoadDirective implements AfterViewInit {
// ...
constructor(private el: ElementRef) {}
private lazyLoadImage() {
const obs = new IntersectionObserver(entries => {
entries.forEach(({ isIntersecting }) => {
if (isIntersecting) {
this.loadImage();
obs.unobserve(this.el.nativeElement);
}
});
});
obs.observe(this.el.nativeElement);
}
private loadImage() {
this.srcAttr = this.src;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment