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

Basic example

Lazy Loading will automatically initialize after adding .lazy class 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

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.

Error

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

Animations

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

Container

Initialize a set of elements at once by adding .lazy class to their container. If you set 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.

Lazy Loading - API

Usage

Via data attributes

Via JavaScript


                      var lazyElement = new mdb.LazyLoad(document.getElementById('lazyElement'), {
                      lazySrc: '...', lazyPlaceholder: '...', lazyError: '...', });

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.


                      $('.example-class').lazyLoad(options);

Options

Name	Type	Default	Description
`lazy-src`	String	`'...'`	Defines the source of an element
`lazy-delay`	Number	`500`	Defines delay after which element will show
`lazy-animation`	String	`'fade-in'`	Defines animation during element showing
`lazy-offset`	Number	`0`	Defines an additional offset after which element will show
`lazy-placeholder`	String	`-`	Defines a picture that is shown before loading a proper element
`lazy-error`	String	`-`	Defines a picture that is shown if an error with showing element occurs

Methods

Name	Description	Example
`dispose`	Removes an instance of the lazy element	`lazyElement.dispose()`


                      mdb.lazyLoad.getInstance(document.getElementById('example-element')).dispose();

Events

Name	Description
`onLoad.mdb.lazy`	This event fires immediately when an image is loaded.
`onError.mdb.lazy`	This event fires immediately when an error with loading image occurs.


                      const instance =
                      mdb.lazyLoad.getInstance(document.getElementById('example-element'));
                      instance.addEventListener('onLoad.mdb.lazy', () => { // do something });

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:


                      import { LazyLoad } from 'mdb-ui-kit';