Lazy loading

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

Required ES init: LazyLoad *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

Lazy Loading will automatically initialize after adding data-mdb-lazy-load-init attribute to your img or video element. It is important to add data-mdb-lazy-src attribute - otherwise, Lazy Load will throw an error.

Scroll down to see an image

Small Apartment
Show code

Offset

Use data-mdb-lazy-offset attribute to define an additional amount of pixels after which image or video will show.

Scroll more down to load a picture.

Small Apartment
Show code

Error

Use data-mdb-lazy-error to define a picture that will show if image or video doesn't load.

Example image
Show code

Animations

Use data-mdb-lazy-animation to specify which animation you want to activate when element loads.

Small Apartment
Small Apartment
Show code

Container

Initialize a set of elements at once by adding data-mdb-lazy-load-init attribute to their container. If you set options with with data-mdb-lazy attributes in the parent, all of img and video elements inside will inherit them. You can overwrite them by declaring these attributes in inner elements.

Example image Small Apartment
Show code