This guide explains how to set up a Lazy load of images in Angular. The Images are better at conveying a message. It also results in better user experience. A picture is worth a thousand words is an old saying which means a picture may convey an idea more quickly and effectively than the written word.
Table of Contents
Why Lazy Load Images?
With the images comes the issue of Page Load speed. More images you have slower it takes to download them and display them to users. Page load speed is a very important factor determining the user experience and also one of the factors in Ranking.
You can optimize the image size using services like ShortPixel, which vastly reduces the size of images. But it won’t be enough if you have many images on the page. This is where the lazy loading of the images comes into picture
What is Lazy Loading?
Lazy Loading Images is a technique, where we delay the loading of images until we need them. For Example, load only those images which are above the fold. The images below the fold are loaded only when the user scrolls to that location. This helps to load the page the quickly.
Lazy Load Images in Angular
There are many third-party libraries available. One of the popular package is ng-lazyload-image.
1 2 3 | npm install ng-lazyload-image --save |
Import LazyLoadImageModule in Root Module or Shared Module
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { LazyLoadImageModule } from 'ng-lazyload-image'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, LazyLoadImageModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Open the app.component.ts. In a img element assign the image to lazyLoad directive using the property binding.
1 2 3 | <img height="700" width="700" [lazyLoad]="imageSrc1"> |
The complete app.component.ts is as below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <h1>Lazy Load Images</h1> <img height="700" width="700" [lazyLoad]="imageSrc1"> <img height="700" width="700" [lazyLoad]="imageSrc2"> <img height="700" width="700" [lazyLoad]="imageSrc3"> <img height="700" width="700" [lazyLoad]="imageSrc4"> `, styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'lazyLoadImages'; imageSrc1="https://images.dog.ceo/breeds/poodle-toy/n02113624_5584.jpg" imageSrc2="https://images.dog.ceo/breeds/terrier-border/n02093754_175.jpg" imageSrc3="https://images.dog.ceo/breeds/terrier-lakeland/n02095570_4188.jpg" imageSrc4="https://images.dog.ceo/breeds/keeshond/n02112350_9431.jpg" } |
Run the app. As you scroll down you will see that images are lazily loaded.
Default Image
You can specify an optional default image as shown below
1 2 3 | <img [defaultImage]="defaultImage" [lazyLoad]="imageSrc1"> |
Background Image
1 2 3 4 | <img [backgroundImage]="defaultImage" [lazyLoad]="imageSrc1"> |
Responsive Images
You can also use the useSrcSet property to display the Responsive images
1 2 3 4 5 6 7 8 9 10 11 | @Component({ selector: 'image', template: ` <img [defaultImage]="defaultImage" [lazyLoad]="images" [useSrcset]="true" /> `, }) class ImageComponent { defaultImage = 'https://www.placecage.com/1000/1000'; images = `https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?fm=jpg 700w, https://images.unsplash.com/photo-1437818628339-19ded67ade8e?fm=jpg 1100w`; } |
Debug
Another important feature of the library is the debugging feature. Use the [debug]="true" and see the debug information in the web console.
1 2 3 | <img [debug]="true" [defaultImage]="defaultImage" [lazyLoad]="imageSrc1"> |
Angular Universal
The library does not seems to work correctly with Angular Universal due to Image delivered by Universal are reloaded causing a flash
blog
nice