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
.webp)
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 |
|---|---|---|---|---|
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 |