Lazy Load Images in Angular

Updated on August 26, 2020     Kisan Patel

<img loading=lazy> is supported by most popular Chromium-powered browsers (Chrome, Edge, Opera) and Firefox.

<img src="logo.png" alt="logo" loading="lazy">

Let’s create a directive to add loading="lazy" attribute to our img element if browser support as below:

ng g d lazy-img

lazy-Img.directive.ts

import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: 'img' })
export class LazyImgDirective {
   constructor({ nativeElement }: ElementRef<HTMLImageElement>) {
     const supports = 'loading' in HTMLImageElement.prototype;

     if (supports) {
       nativeElement.setAttribute('loading', 'lazy');
     }
   }
}

Also, Refer another solution: https://stackblitz.com/edit/angular-lazy-images