A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.
Do you know VueDose? It's where you can learn tips about the Vue.js ecosystem in a concise format, perfect for busy devs! 🦄
- Simple demo
- Responsive images, by @aarongarciah
- Progressive image loading with animations, by @aarongarciah
- Performant progressive blur using SVG
npm install v-lazy-image
Warning: You'll need to install the w3c Intersection Observer polyfill in case you're targeting a browser which doesn't support it.
You can register the component globally so it's available in all your apps:
Or use it locally in any of your components:
You must pass an
src property with the link of the image:
That image will be loaded as soon as the image enters the viewport.
You can use the
src-placeholder property to define an image that is shown until the
src image is loaded.
src image is loaded, a
v-lazy-image-loaded class is added, so you can use it to perform animations. For example, a blur effect:
You could listen to the
load events for more complex animations and state handling:
srcset property you can set images for different resolutions:
When using the
srcset attribute is recommended to use also
src as a fallback for browsers that don't support the
srcset prop is combinable with
src-placeholder in order to apply progressive loading.
If you want to wrap the
img in a
picture tag, use the prop
usePicture. You can then use slots to add additional elements above the
Note you can use the picture polyfill.
Aside from the following API, you can pass any img attribute, such as
alt, and they'll be added to the rendered
Fields marked as (*) are required.
||String||If defined, it will be shown until the
Useful for progressive image loading, see demo
||String||Images to be used for different resolutions|
||Object||The Intersection Observer options object.|
||Triggered when the image intersects the viewport|
||Triggered when the lazy image defined in