Lazy Loading Image Tutorial in Angular 12

Lazy loading is a web-design technique that intentionally postpones the loading of offscreen images. This is done until the moment a user scrolls down the page. It really helps in loading the page quickly.

Lazy loading of an image example in Angular 12

We will learn in this tutorial to lazy load images in some simple steps in an Angular application.

Angular 12- Lazy Loading Image Example

We simply need to follow the given steps for impplementing the lazy loading image in Angular 12 app:

Step 1 is to Create the New Angular App.

Step 2 is to Install the Lazy Load Library.

Step 3 is to Add Code on App.Module.ts File.

Step 4 is to Add Code on View File.

Step 5 is to Add Code On app.Component ts File.

Step 6 is to Start the Angular App.

Now, let’s learn in detail

Step 1- Creating the New Angular App

First of all, open your terminal and execute the given command on it to install an angular app:

ng new my-new-app

Step 2 : Installing the Lazy Load Library

Next, just install image lazy loading library for implementing the image lazy loading in an Angular app. Further, install the packages by executing the following commands on the terminal:

npm i ng-lazyload-image

Step 3: Adding Code on App.Module.ts File

Afterwards, we visit src/app directory and open app.module.ts file and also, add the following lines into app.module.ts file:

import { LazyLoadImageModule} from 'ng-lazyload-image';
 
@NgModule({
  declarations: [...],
  imports: [
.......,
LazyLoadImageModule
      
  ],
  bootstrap: [...]
})
 
export class AppModule { }

Step 4: Adding the Code on View File

In next step, create the image lazy loading html in the Angular app. Visit src/app/ and app.component.html and update the following code into it:

<h1>Lazy Load Images</h1>
  
 <div>
   <img height="700" width="700" [lazyLoad]="image1">
  <img height="700" width="700" [lazyLoad]="image2">
  <img height="700" width="700" [lazyLoad]="image3">
  <img height="700" width="700" [lazyLoad]="image4">
 </div>
 
 <div>
   <h2>Responsive Images</h2>
   <img [defaultImage]="defaultImage" [useSrcset]="true" [lazyLoad]="images">
 
 </div>

Step 5: Adding Code On app.Component ts File

Now, follow this step in which the src/app directory and open app.component.ts are visited. After this, add the following code into component.ts file:

import { Component, VERSION } from '@angular/core';
 
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
 
  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: Starting the Angular App

Lastly, we reach the final step of implementation where we execute the following command executed on the terminal to start angular fullcalendar npm app:

ng serve

Conclusion

Finally, we reach the end of image Lazy Loading in Angular 12 tutorial. In this tutorial, we have tried to learn the step by step implementation of image lazy loading in the Angular app. We hope that you like this easy guide and would share it with others.