v-lazy-image

by alexjoverm

alexjoverm / v-lazy-image

Lazy load images using Intersection Observer, apply progressive rendering and css animations.

525 Stars 48 Forks Last release: Not found MIT License 54 Commits 11 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

v-lazy-image

npm npm Donate

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! 🦄

Demos

Usage

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:

import Vue from "vue";
import { VLazyImagePlugin } from "v-lazy-image";

Vue.use(VLazyImagePlugin);

Or use it locally in any of your components:

import VLazyImage from "v-lazy-image";

export default { components: { VLazyImage } };

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.

Progressive Loading

You can use the

src-placeholder
property to define an image that is shown until the
src
image is loaded.

When the

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:

In case you are using Webpack bundler for images too (just like Vue-cli):

html

You could listen to the

intersect
and
load
events for more complex animations and state handling:

@jmperezperez has written about the progressive loading technique on his blog, in case you want a deeper explanation.

Responsive Images

Using the

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
and
sizes
attributes:

The

srcset
prop is combinable with
src-placeholder
in order to apply progressive loading.

Picture

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
img
element`.
  


Renders as:


  
  Fallback

Note you can use the picture polyfill.

API

Aside from the following API, you can pass any img attribute, such as

alt
, and they'll be added to the rendered
tag.

Fields marked as (*) are required.

Props

| Name | Type | Default | Description | | ---------------------- | ------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | |

src
| String (*) | - | Image
src
to lazy load when it intersects with the viewport | |
src-placeholder
| String | ' ' | If defined, it will be shown until the
src
image is loaded.
Useful for progressive image loading, see demo | |
srcset
| String | - | Images to be used for different resolutions | |
intersection-options
| Object | () => ({}) | The Intersection Observer options object. | |
use-picture
| Boolean | false | Wrap the img in a picture tag. |

Events

| Name | Description | | ----------- | -------------------------------------------------------- | |

intersect
| Triggered when the image intersects the viewport | |
load
| Triggered when the lazy image defined in
src
is loaded | |
error
| Triggered when the lazy image defined in
src
fails to load |

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.