Lazy loading

React 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

Remember to add lazySrc property - otherwise, Lazy Load will throw an error.

Scroll down to see an image

404 not found 
import React, { useRef } from 'react';
import { MDBLazyLoading } from 'mdb-react-ui-kit';

export default function App() {
  const basicContainer = useRef(null);

  return (
    <div className='container lazy' ref={basicContainer} style={{ height: '500px', overflowY: 'scroll' }}>
      <div className='row text-center' style={{ height: '800px' }}>
        <p>Scroll down to see an image</p>
        <p style={{ marginBottom: '50%' }}>
          <i className='far fa-arrow-alt-circle-down fa-3x my-4'></i>
        </p>

        <MDBLazyLoading
          containerRef={basicContainer}
          lazySrc='https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp'
          lazyPlaceholder='https://place-hold.it/1321x583?text=Loading'
          alt='Example image'
          className='img-fluid my-3'
          animation='none'
        />
        <MDBLazyLoading
          containerRef={basicContainer}
          video
          lazySrc='https://mdbootstrap.com/img/video/Sail-Away.mp4'
          lazyDelay={1000}
          lazyPlaceholder='https://place-hold.it/838x471?text=Loading'
          muted
          autoPlay
          animation='none'
        />
      </div>
    </div>
  );
}

Offset

Use lazyOffset property to define an additional amount of pixels after which image or video will show.

Scroll more down to load a picture.

404 not found 
import React from 'react';
import { MDBLazyLoading } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBLazyLoading
      lazySrc='https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp'
      lazyPlaceholder='https://place-hold.it/1321x583?text=Loading'
      lazyOffset={800}
      alt='Example image'
      className='img-fluid'
      animation='none'
    />
  );
}

Error

Use lazyError to define a picture that will show if image or video doesn't load.

Example image 
import React from 'react';
import { MDBLazyLoading } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBLazyLoading
      lazySrc='sample'
      lazyPlaceholder='https://place-hold.it/1321x583?text=Loading'
      lazyError='https://place-hold.it/1321x583?text=Error'
      alt='Example image'
      className='img-fluid'
      animation='none'
    />
  );
}

Animations

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

404 not found
404 not found 
import React from 'react';
import { MDBLazyLoading, MDBContainer, MDBRow } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBContainer>
      <MDBRow className='mb-3'>
        <MDBLazyLoading
          lazySrc='https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp'
          lazyPlaceholder='https://place-hold.it/1321x583?text=Loading'
          lazyDelay={1000}
          alt='Example image'
          className='img-fluid'
          animation='zoom-in'
        />
      </MDBRow>
      <MDBRow>
        <MDBLazyLoading
          lazySrc='https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp'
          lazyPlaceholder='https://place-hold.it/1321x583?text=Loading'
          lazyDelay={1000}
          alt='Example image'
          className='img-fluid'
          animation='tada'
        />
      </MDBRow>
    </MDBContainer>
  );
}

Container

Initialize a set of elements at once by using MDBLazyContainer component. If you set lazyError and lazyPlacelder properties in the parent, all of img and video elements inside will inherit them. You can overwrite them by using lazyItems property.

Example image Example image 
import React from 'react';
import { MDBLazyLoading } from 'mdb-react-ui-kit';

export default function App() {
  const lazyElements = [
    { lazySrc: '.', alt: 'Example image', className: 'img-fluid mb-3' },
    {
      lazySrc: 'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp',
      alt: 'Example image',
      className: 'img-fluid mb-3',
    },
    {
      lazySrc: 'https://mdbootstrap.com/img/video/Sail-Away.mp4',
      muted: true,
      autoPlay: true,
      video: true,
      className: 'img-fluid',
    },
  ];

  return (
    <MDBLazyContainer
      className='mt-5'
      lazyPlaceholder='https://place-hold.it/1321x583?text=Loading'
      lazyError='https://place-hold.it/1321x583?text=Error'
      lazyItems={lazyElements}
    />
  );
}

Lazy loading - API

Import

import { MDBLazyLoading } from 'mdb-react-ui-kit';

Properties

MDBLazyLoading

Name Type Default Description Example
animation 'fade-in' | 'fade-in-down' | 'fade-in-left' | 'fade-in-right' | 'fade-in-up' | 'fade-out' | 'fade-out-down' | 'fade-out-left' | 'fade-out-right' | 'fade-out-up' | 'slide-in-down' | 'slide-in-left' | 'slide-in-right' | 'slide-in-up' | 'slide-out-down' | 'slide-out-left' | 'slide-out-right' | 'slide-out-up' | 'slide-down' | 'slide-left' | 'slide-right' | 'slide-up' | 'zoom-in' | 'zoom-out' | 'tada' | 'pulse' | 'drop-in' | 'drop-out' | 'fly-in' | 'fly-in-up' | 'fly-in-down' | 'fly-in-left' | 'fly-in-right' | 'fly-out' | 'fly-out-up' | 'fly-out-down' | 'fly-out-left' | 'fly-out-right' | 'browse-in' | 'browse-out' | 'browse-out-left' | 'browse-out-right' | 'jiggle' | 'flash' | 'shake' | 'glow' | 'none' 'fade-in Defines animation during element showing. Set it to 'none' to remove an animation. <MDBLazyLoading animation='zoom-in' />
containerRef React.RefObject '' Defines a reference to the MDBLazyContainer element <MDBLazyContainer containerRef={exampleRef} />
lazyDelay number 500 Defines delay after which element will show <MDBLazyLoading lazyDelay={1000} />
lazyError string '' Defines a picture that is shown if an error with showing element occurs <MDBLazyLoading lazyError='link-to-your-photo' />
lazyOffset number 0 Defines an additional offset after which element will show <MDBLazyLoading lazyOffset={500} />
lazyPlaceholder string '' Defines a picture that is shown before loading a proper element <MDBLazyLoading lazyPlaceholder='link-to-your-photo' />
lazyRef React.RefObject '' Sets a reference for the lazy element <MDBLazyLoading lazyRef={exampleRef} />
lazySrc string '' Defines the source of an element <MDBLazyLoading lazySrc='link-to-your-photo' />
video boolean 'false' Creates a lazy loading element with video tag <MDBLazyLoading video />

MDBLazyContainer

Name Type Default Description Example
lazyContainerRef React.MutableRefObject '' Sets a reference for the MDBLazyContainer <MDBLazyLoading lazyContainerRef={exampleRef} />
lazyItems Array of objects [] Defines items to render inside container. Objects should have properties that matches with MDBLazyLoading ones <MDBLazyContainer lazyItems{[ { lazySrc: 'link-to-your-photo' }, { lazySrc: 'link-to-your-photo', id: 'item2' } ]} />
lazyError string '' Defines a picture that is shown if an error with showing element inside container occurs <MDBLazyContainer lazyError='link-to-your-photo' />
lazyPlaceholder string '' Defines a picture that is shown before loading every element inside container <MDBLazyContainer lazyPlaceholder='link-to-your-photo' />
tag string 'div' Defines a tag for the MDBLazyContainer element <MDBLazyContainer tag='span' />

Events

MDBLazyLoading

Name Type Description
onLoad React.ReactEventHandler<HTMLImageElement> | <React.ReactEventHandlerHTMLVideoElement> | () => any This event fires immediately when the picture or video is loaded
onError React.ReactEventHandler<HTMLImageElement> | <React.ReactEventHandlerHTMLVideoElement> | (error?: string) => any This event fires immediately when the error occurs while loading