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

Example image
        
            
          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.

        
            
          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.

        
            
          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.

        
            
          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.

        
            
          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
className String '' Add custom class to MDBLazyLoading <MDBLazyLoading className="class" />
video Boolean 'false' Creates a lazy loading element with video tag <MDBLazyLoading video />
lazyRef Reference '' Sets a reference for the lazy element <MDBLazyLoading lazyRef{exampleRef} />
lazySrc String '' Defines the source of an element <MDBLazyLoading lazySrc='link-to-your-photo' />
lazyDelay Number 500 Defines delay after which element will show <MDBLazyLoading lazyDelay={1000} />
animation String 'fade-in Defines animation during element showing. Set it to 'none' to remove an animation. <MDBLazyLoading animation='zoom-in' />
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' />
lazyError String '' Defines a picture that is shown if an error with showing element occurs <MDBLazyLoading lazyError='link-to-your-photo' />

MDBLazyContainer

Name Type Default Description Example
className String '' Add custom class to MDBLazyContainer <MDBLazyContainer className="class" />
tag String 'div' Defines a tag for the MDBLazyContainer element <MDBLazyContainer tag='span' />
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' } ]} />
lazyPlaceholder String '' Defines a picture that is shown before loading every element inside container <MDBLazyContainer lazyPlaceholder='link-to-your-photo' />
lazyError String '' Defines a picture that is shown if an error with showing element inside container occurs <MDBLazyContainer lazyError='link-to-your-photo' />
lazyContainerRef Reference '' Defines a reference to the MDBLazyContainer element <MDBLazyContainer lazyContainerRef={exampleRef} />