Lazy loading

Angular Bootstrap 5 Lazy loading

Bootstrap 5 Lazy Loading is a feature, that allows you to load images or videos only when they are visible on the screen.

Note: Read the API tab to find all available options and advanced customization

Basic example

Lazy Loading will automatically initialize after adding mdbLazyLoad directive to your img or video element. It is important to add [attr.data-src] attribute - otherwise, directive will throw an error. You can use [container] input to bind directive to specific parent container. In this case, the directive will listen to the container scroll event.

Scroll down to see an image

Example image 
        
            
            <div class="container lazy" style="height: 500px; overflow-y: scroll;" #container>
              <div class="row text-center" style="height: 800px;">
                <p>Scroll down to see an image</p>
                <p><i class="far fa-arrow-alt-circle-down fa-3x my-4"></i></p>
                <div style="height: 500px;"></div>
                <p>Img</p>
                <img
                  mdbLazyLoading
                  [container]="container"
                  [loadingPlaceholder]="'https://place-hold.it/838x471?text=Loading'"
                  [attr.data-src]="'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp'"
                  alt="Example image"
                  class="img-fluid my-3"
                />
                <video
                  mdbLazyLoading
                  [container]="container"
                  [loadingPlaceholder]="'https://place-hold.it/838x471?text=Loading'"
                  [attr.data-src]="'https://mdbootstrap.com/img/video/Sail-Away.mp4'"
                  class="lazy img-fluid"
                  muted
                  autoplay
                ></video>
              </div>
            </div>

Offset

Use [offset] input to define an additional amount of pixels after which image or video will show.

Scroll more down to load a picture.

Example image 
        
            
            <img
              mdbLazyLoading
              [loadingPlaceholder]="'https://place-hold.it/838x471?text=Loading'"
              [attr.data-src]="'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp'"
              [offset]="500"
              [delay]="1000"
              alt="Example image"
              class="img-fluid my-3"
            />

Error

Use [errorPlaceholder] input to define a picture that will show if image or video doesn't load.

Example image 
        
            
            <img
              mdbLazyLoading
              [loadingPlaceholder]="'https://place-hold.it/838x471?text=Loading'"
              [errorPlaceholder]="'https://place-hold.it/838x471?text=Error'"
              alt="Example image"
              class="img-fluid my-3"
            />

Animations

Use code below to specify which animation you want to activate when element loads.

Example image
Example image 
        
            
            <img
              mdbLazyLoading
              [@zoomIn]="zoomInLoaded"
              (loadingEnd)="zoomInLoaded = true"
              [loadingPlaceholder]="'https://place-hold.it/838x471?text=Loading'"
              [attr.data-src]="'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp'"
              alt="Example image"
              class="img-fluid my-3"
            />
            <img
              mdbLazyLoading
              [@shake]="shakeLoaded"
              [delay]="5000"
              (loadingEnd)="shakeLoaded = true"
              [loadingPlaceholder]="'https://place-hold.it/838x471?text=Loading'"
              [attr.data-src]="'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp'"
              alt="Example image"
              class="img-fluid my-3"
            />
          
        
    
        
            
            import { Component } from '@angular/core';
            import { shakeAnimation, zoomInAnimation } from'mdb-angular-ui-kit/animations';

            @Component({ selector: 'app-lazy-loading',
              templateUrl: './lazy-loading.component.html',
              styleUrls: ['./lazy-loading.component.scss'],
              animations: [zoomInAnimation(), shakeAnimation()],
            })
            export class LazyLoadingComponent {
              zoomInLoaded= false;
              shakeLoaded = false;

              constructor() {}
            }

Lazy loading - API

Import

        
            
          import { MdbLazyLoadingModule } from 'mdb-angular-ui-kit/lazy-loading';
          …
          @NgModule ({
            ...
            imports: [MdbLazyLoadingModule],
            ...
          })

Inputs

Name Type Default Description
container HTMLElement - Defines parent container of the element
delay number 0 Defines delay after which element will show
errorPlaceholder string - Defines a picture that is shown if an error with showing element occurs
offset number 0 Defines an additional offset after which element will show
loadingPlaceholder string - Defines a picture that is shown before loading a proper element

Outputs

Name Type Description
loadingEnd EventEmitter<void> Event fired when element is fully loaded
loadingError EventEmitter<void> Event fired if error occurs while loading
loadingStart EventEmitter<void> Event fired when loading starts 
        
            
              <img
                mdbLazyLoading
                (loadingStart)="onLoadingStart"
                [loadingPlaceholder]="'https://place-hold.it/838x471?text=Loading'"
                [attr.data-src]="'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp'"
                alt="Example image"
                class="img-fluid my-3"
              />
            
        
    
        
            
              import { Component } from '@angular/core';

              @Component({ selector: 'app-lazy-loading',
                templateUrl: './lazy-loading.component.html',
                styleUrls: ['./lazy-loading.component.scss'],
              })
              export class LazyLoadingComponent {
                onLoadingStart() {
                  console.log('loading start');
                }

                constructor() {}
              }