Lazy loading

Vue 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

Lazy Loading will automatically initialize after adding v-mdb-lazy directive to your img or video element. It is important to add src binding value - otherwise, Lazy Load will throw an error.

Scroll down to see an image

Show code

Offset

Use offset binding value to define an additional amount of pixels after which image or video will show.

Scroll more down to load a picture.

Show code

Error

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

Show code

Animations

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

Show code

Container

Initialize a set of elements at once by adding v-mdb-lazy directive to their container. If you set 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 as data-lazy-"name of binding value"

Show code

Related resources