Angular 14 Lazy Load Images Example

Angular 14 lazy loading images example. In this tutorial, you will learn how to create lazy loading images in an Angular 14 applications.

The 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 14 Lazy Load Images Example

Use the following steps to implement lazy loading images in angular 14 apps; as follows:

• Step 1 – Create New Angular App
• Step 2 – Install Lay Load Library
• Step 3 – Import Modules in Module.ts File
• Step 4 – Create Lazy Images Tag in View File
• Step 5 – Import Components in 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 – Import Modules in 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 – Create Lazy Images Tag in 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 – Import Components in 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 Tutorials