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
Show code

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
Show code

Error

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

Example image
Show code

Animations

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

Example image
Example image
Show code

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
Show code