Examples
Learn how to use the lazy-load module for more examples in your Nuxt 3 application.
Examples
Following examples come from Lozad.js documentation and were modified to work with the @nuxt-modules/algolia.
Remember to always call an init method in the root application Vue component (or page) in order for the module to work as expected.
<script setup lang="ts">
const { init } = useLazyLoad();
onMounted(() => {
init()
})
</script>
Responsive image using src-set:
<img class="lazy" data-src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w">
Image as a background for div:
<div class="lazy" data-background-image="image.png">
</div>
Multiple images used as background for div:
<div class="lazy" data-background-image="path/to/first/image,path/to/second/image,path/to/third/image">
</div>
Responsive image using image-set for div:
<div class="lazy" data-background-image-set="url('photo.jpg') 1x, url('photo@2x.jpg') 2x">
</div>
Other HTML elements (tags)
Lazy loading iframes:
<iframe data-src="embed.html" class="lazy"></iframe>
Lazy loading video tags:
<video class="lazy" data-poster="images/backgrounds/video-poster.jpeg">
<source data-src="video/mov_bbb.mp4" type="video/mp4">
<source data-src="video/mov_bbb.ogg" type="video/ogg">
</video>
Lazy loading picture tags:
<picture class="lazy" style="display: block; min-height: 1rem" data-iesrc="images/thumbs/04.jpg" data-alt="">
<source srcset="images/thumbs/04.jpg" media="(min-width: 1280px)">
<source srcset="images/thumbs/05.jpg" media="(min-width: 980px)">
<source srcset="images/thumbs/06.jpg" media="(min-width: 320px)">
<!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
<img src="data:image/jpeg;base64,/some_lqip_in_base_64==">
</picture>
For more information check out here