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.
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
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.
There are many third-party libraries available. One of the popular package is ng-lazyload-image.
npm install ng-lazyload-image --save
Import LazyLoadImageModule in Root Module or Shared Module
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.
<img height="700" width="700" [lazyLoad]="imageSrc1">
The complete app.component.ts is as below
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.
You can specify an optional default image as shown below
<img [defaultImage]="defaultImage" [lazyLoad]="imageSrc1">
<img [backgroundImage]="defaultImage" [lazyLoad]="imageSrc1
You can also use the useSrcSet property to display the Responsive images
@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/ph
Another important feature of the library is the debugging feature. Use the [debug]="true" and see the debug information in the web console.
<img [debug]="true" [defaultImage]="defaultImage" [lazyLoad]="imageSrc1">
The library does not seems to work correctly with Angular Universal due to Image delivered by Universal are reloaded causing a flash
