Angular 12 Lazy Loading Images Example

Angular 12 lazy loading images example. In this tutorial, you will learn how to implement lazy loading images in an Angular application.

Note that, Lazy Loading Images is a technique, where you can delay the loading of images until we need them. For example, Load only those images which are display view. The images below the display are loaded only when the user scrolls to that location. This helps to load the page quickly.

Angular 12 Images Lazy Loading Example

Follow the following steps and lazy loading images in angular 12 app:

• Step 1 – Create New Angular App
• Step 2 – Install Lay Load Library
• Step 3 – Add Code on App.Module.ts File
• Step 4 – Add Code on View File
• Step 5 – Add Code On app.Component ts File
• Step 6 – Start the Angular App

Step 1 – Create New Angular App

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

ng new my-new-app

Step 2 – Install Lay Load Library

Then install image lazy loading library for implement image lazy loading in angular app. So, You can install the packages by executing the following commands on the terminal:

npm i ng-lazyload-image 

Step 3 – Add Code on App.Module.ts File

In this step, visit src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:

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

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

export class AppModule { }

Step 4 – Add Code on View File

In this step, create image lazy loading html in angular app. So, 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 – Add Code On app.Component ts File

In this step, visit the src/app directory and open app.component.ts. Then 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 – Start the Angular App

In this step, execute the following command on terminal to start angular app:

ng serve

Recommended Angular Posts