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

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.

Example image

Error

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

Example image

Animations

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

Example image
Example image

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

Lazy loading - API


Import


        import { MDBBadge } 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} />