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
.webp)
<template>
<MDBContainer
class="mt-5"
style="height: 500px; overflow-y: scroll"
id="lazy-container-1"
>
<MDBRow class="text-center" style="height: 800px">
<p>Scroll down to see an image</p>
<p><i class="far fa-arrow-alt-circle-down fa-3x my-4"></i></p>
<img
v-mdb-lazy="{
src:
'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp',
placeholder: 'https://place-hold.it/1321x583?text=Loading',
parent: '#lazy-container-1'
}"
alt="Example image"
class="img-fluid lazy my-3"
style="margin-top: 50% !important"
/>
<video
class="lazy img-fluid"
v-mdb-lazy="{
src: 'https://mdbootstrap.com/img/video/Sail-Away.mp4',
delay: 1000,
placeholder: 'https://place-hold.it/838x471?text=Loading',
parent: '#lazy-container-1'
}"
muted="muted"
autoplay="autoplay"
></video>
</MDBRow>
</MDBContainer>
</template>
<script>
import { mdbLazy, MDBContainer, MDBRow } from 'mdb-vue-ui-kit';
export default {
directives: {
mdbLazy
},
components: {
MDBContainer,
MDBRow
}
};
</script>
<script setup lang="ts">
import {
mdbLazy as vMdbLazy,
MDBContainer,
MDBRow
} from 'mdb-vue-ui-kit';
</script>
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.
<template>
<img
v-mdb-lazy="{
src:
'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp',
delay: 1000,
offset: 500,
placeholder: 'https://place-hold.it/1321x583?text=Loading'
}"
alt="Example image"
class="img-fluid lazy"
/>
</template>
<script>
import { mdbLazy } from 'mdb-vue-ui-kit';
export default {
directives: {
mdbLazy
}
};
</script>
<script setup lang="ts">
import { mdbLazy as vMdbLazy } from 'mdb-vue-ui-kit';
</script>
Error
Use error binding value to define a picture that will
show if image or video doesn't load.
<template>
<img
v-mdb-lazy="{
src: 'sample',
delay: '1000',
placeholder: 'https://place-hold.it/1321x583?text=Loading',
error: 'https://place-hold.it/1321x583?text=Error'
}"
alt="Example image"
class="img-fluid lazy"
/>
</template>
<script>
import { mdbLazy } from 'mdb-vue-ui-kit';
export default {
directives: {
mdbLazy
}
};
</script>
<script setup lang="ts">
import { mdbLazy as vMdbLazy } from 'mdb-vue-ui-kit';
</script>
Animations
Use animation binding value to specify which animation
you want to activate when element loads.
<template>
<img
v-mdb-lazy="{
src:
'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp',
delay: 1000,
placeholder: 'https://place-hold.it/1321x583?text=Loading',
animation: 'zoom-in'
}"
alt="Example image"
class="img-fluid lazy mb-3"
/>
<img
v-mdb-lazy="{
src:
'https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp',
delay: 1000,
placeholder: 'https://place-hold.it/1321x583?text=Loading',
animation: 'tada'
}"
alt="Example image"
class="img-fluid lazy"
/>
</template>
<script>
import { mdbLazy } from 'mdb-vue-ui-kit';
export default {
directives: {
mdbLazy
}
};
</script>
<script setup lang="ts">
import { mdbLazy as vMdbLazy } from 'mdb-vue-ui-kit';
</script>
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"
<template>
<MDBContainer>
<MDBRow
v-mdb-lazy:container="{
placeholder: 'https://place-hold.it/1321x583?text=Loading',
error: 'https://place-hold.it/1321x583?text=Error',
delay: 1000
}"
>
<img data-lazy-src="." alt="Example image" class="img-fluid" />
<img
data-lazy-src="https://mdbootstrap.com/img/Photos/Slides/img%20(102).webp"
data-lazy-animation="tada"
alt="Example image"
class="img-fluid my-3"
/>
<video
class="img-fluid"
data-lazy-src="https://mdbootstrap.com/img/video/Sail-Away.mp4"
muted="muted"
autoplay="autoplay"
data-lazy-animation="zoom-in"
></video>
</MDBRow>
</MDBContainer>
</template>
<script>
import { mdbLazy, MDBContainer, MDBRow } from 'mdb-vue-ui-kit';
export default {
directives: {
mdbLazy
},
components: {
MDBContainer,
MDBRow
}
};
</script>
<script setup lang="ts">
import {
mdbLazy as vMdbLazy,
MDBContainer,
MDBRow
} from 'mdb-vue-ui-kit';
</script>
Infinite scroll - API
Import
<script>
import {
mdbLazy
} from 'mdb-vue-ui-kit';
</script>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
src
|
String | '' |
Defines the source of an element |
placeholder
|
String | '' |
Defines a picture that is shown before loading a proper element |
error
|
String | '' |
Defines a picture that is shown if an error with showing element occurs |
delay
|
Number | 500 |
Defines delay after which element will show |
offset
|
Number | 0 |
Defines an additional offset after which element will show |
media
|
Number | 0 |
Set the minimum width in pixels for which the sticky should work |
animation
|
String | '' |
Defines animation during element showing |