A Vue.js component to lazy load an image automatically when it enters the viewport using theIntersection Observer API.
⚠️ Check thepractical examples and demosif you are creating a real-world or enterprise project and see how toachieve max performanceusing responsive images and progressive image loading.
npm install v-lazy-image
Warning:You'll need to install thew3c Intersection Observer polyfillin case you're targeting a browser which doesn't support it.
ForVue 3,import it and use it like any other component:
<scriptsetup>
importVLazyImagefrom"v-lazy-image";
</script>
ForVue 2,import it fromv-lazy-image/v2
:
importVLazyImagefrom"v-lazy-image/v2";
exportdefault{
components:{
VLazyImage
}
};
You must pass ansrc
property with the link of the image:
<template>
<v-lazy-imagesrc= "http://lorempixel /400/200/"/>
</template>
That easy, the image will be loaded as soon as it enters the viewport.See it running in this demoand you'll learn how to use Chrome DevTools to check how it's loaded.
Just by usingv-lazy-image
you'll have a performance gain, since the image will be loaded when it's going to be seen.
But you can go to the next level and squeeze your web's performance if you use the next techniques.
v-lazy-image
allows you to use Web Standard's: thesrcset
attribute on images and the<picture>
tag.
"Use Responsive Images with v-lazy-image"shows you how simple it is and see it in action in a demo.
A technique used by platforms like Spotify, Netflix or Medium to improve Perceived Performance, thus the User Experience.
In"Achieve Max Performance loading your images with v-lazy-image"you'll see what's progressive image loading about, how to apply it inv-lazy-image
using thesrc-placeholder
attribute and a demo to see how it plays with a CSS animation.
Aside from the following API, you can pass anyimgattribute, such asalt
,and they'll be added to the rendered<img>
tag.
Fields marked as (*) are required.
Name | Type | Default | Description |
---|---|---|---|
src |
String(*) | - | Imagesrc to lazy load when it intersects with the viewport |
src-placeholder |
String | ' ' | If defined, it will be shown until thesrc image is loaded.Useful for progressive image loading,see demo |
srcset |
String | - | Images to be used for different resolutions |
intersection-options |
Object | () => ({}) | TheIntersection Observer options object. |
use-picture |
Boolean | false | Wrap the img in a picture tag. |
Name | Description |
---|---|
intersect |
Triggered when the image intersects the viewport |
load |
Triggered when the lazy image defined insrc is loaded |
error |
Triggered when the lazy image defined insrc fails to load |