Lazy Load Images Angular 17

To lazy load images in Angular; To delay loading your images on Angular applications, simply run npm i ng-lazyload-image to install lazy load module, and then use its function [lazyLoad]=”image1″ with an image on an HTML template to defer loading images on applications.

Lazy loading of images in web pages and applications is a technique, with the help of this the speed and performance of your application becomes much faster, and at the same time it remains delayed until they are not needed in the angular application.

Angular Lazy Load Images

Steps to lazy load images in angular 17 applications:

Step 1 – Create a New Angular App

Run the ng new my-new-app command on cmd or terminal to install and create a new Angular project:

ng new my-new-app --no-standalone

Step 2 – Install Lazy Load Module

Simply run npm i ng-lazyload-image command on cmd to install lazy load image module into your angular application, it will help you to defer the loading of images until they are needed and it can improve performance: 

cd my-new-app
npm i ng-lazyload-image 

Step 3 – Import Lazy Load Image Modules

Navigate to src/app folder and open app.module.ts typescript file and import it like following into it:

import { LazyLoadImageModule} from 'ng-lazyload-image';

@NgModule({
  declarations: [...],
  imports: [
.......,
LazyLoadImageModule

  ],
  bootstrap: [...]
})

export class AppModule { }

Step 4 – Use Lazy Load Images in HTML Template

To lazy load images in html template, simply navigate to src/app/ and open app.component.html, and then use lazyload with your images like following in it:

<h1>Angular Lazy Load Image Example</h1>

 <div>
   <img height="600" width="600" [lazyLoad]="image1">
  <img height="600" width="600" [lazyLoad]="image2">
  <img height="600" width="600" [lazyLoad]="image3">
  <img height="600" width="600" [lazyLoad]="image4">
 </div>

 <div>
   <h2>Responsive Images</h2>
   <img [defaultImage]="defaultImage" [useSrcset]="true" [lazyLoad]="images">

 </div>

Step 5 – Set Images for Lazy Loading

To set images for lazy loading; Simply navigate to src/app directory and open app.component.ts, then set it like following in it:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-new-app';

  image1="https://images.unsplash.com/photo-1581789164394-810293cd79ce";
  image2="https://images.unsplash.com/photo-1562690868-60bbe7293e94";
  image3="https://images.unsplash.com/photo-1536677813196-8fed27bcecdc";
  image4="https://images.unsplash.com/photo-1599198688091-926a8df3c9be";

    defaultImage = 'https://via.placeholder.com/1000/09f/fff.png';

    images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w,
            https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`;
}

Step 6 – Test the lazy loading

Run ng serve command on cmd to start the angular app:

ng serve

Visit http://localhost:4200 in your browser and check the Network tab in your browser’s developer tools. You should notice that the images are being loaded as they appear in the viewport, and not all images are loaded immediately on page load.

Conclusion

That’s it; you have successfully implemented and used lazy loading images in angular application.

Recommended Angular Tutorials