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
