Images Lazy Load In Angular

The Code Points August 07, 2022 1

In this article, we learn how to configure angular lazy load images. The Images do a better job of communicating the message. Additionally, it enhances the user experience. According to the proverb "a picture is worth a thousand words," a picture can communicate a thought more swiftly and effectively than the written word.

Why Lazy Load Images?

The issue of page load speed is brought on by the images. The more photographs you have, the longer it will take for users to download and view them. The user experience is greatly influenced by page load speed, which is also one of the ranking considerations.

Using services like ShortPixel, which significantly decreases the size of photographs, you can optimize the image size. However, if you have numerous photographs on the page, it won't be enough. This is where the issue with the graphics loading slowly comes into play.

What is Lazy Loading?

Using a method called "lazy loading," we wait to load photos until we actually need them. Consider loading only the images that are visible above the fold. Only after the user scrolls down to that area do the photos below the fold begin to load. This makes the website load more rapidly.

Lazy Load Images in Angular

Third-party libraries are widely accessible. Ng-lazyload-image is a well-known package.

npm install ng-lazyload-image --save

Into the Root Module or Shared Module, import the LazyLoadImageModule

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 { }

Activate the app.component.ts file. Using the property binding, apply the image to the lazyLoad directive in the img element.

<img height="700" imagesrc1="" lazyload="" width="700" />

Below is the full code of the app.component.ts.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `
  <h1>Lazy Load Images</h1>
 
 
  <img height="700" imagesrc1="" lazyload="" width="700" />
  <img height="700" imagesrc2="" lazyload="" width="700" />
  <img height="700" imagesrc3="" lazyload="" width="700" />
  <img height="700" imagesrc4="" lazyload="" width="700" />
  
  `,
  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. Images are being loaded slowly as you scroll down.

Default Image

As demonstrated below, you can choose an optional default image.

<img defaultimage="" imagesrc1="" lazyload="" />

Background Image

<img backgroundimage="" defaultimage="" imagesrc1="" lazyload="" />

Responsive Images

The useSrcSet property can also be used to display responsive images.

@Component({
  selector: 'image',
  template: ` <img defaultimage="" images="" lazyload="" true="" usesrcset="" /> `,
})
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

The debugging capability of the library is another crucial component. See the debug information in the web console by using [debug]="true".

<img debug="" defaultimage="" imagesrc1="" lazyload="" true="" />

Conclusion

In this article, we learned how to image lazy load configures in an angular application.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.