Vue Lazy Picture

Responsive Vue component for Medium-style lazy loading pictures.
Uses intersection-observer and stackblur-canvas internally.

Demo

https://codesandbox.io/s/4jp678mw09

Warning!
You need to install intersection-observer polyfill separately to support IE and mobile browsers.

Creates sandwich of images in container:

``

// placeholder
// blurred placeholder
// full-size image

`

Usage

Install by npm:
`
npm i vue-lazy-picture
`

Then in your vue app:

`
// App.vue



`

Props

`
containerBgColor: {
type: String,
default: "rgb(222, 222, 222)"
},
maxWidth: {
type: String,
default: "100%"
},
containerClass: {
type: String,
default: "lazy-picture"
},
title: {
type: String,
default: "Image"
},
placeholder: {
type: String,
required: true
},
src: {
type: String,
required: true
},
lazy: {
type: Boolean,
default: false
},
blurRadius: {
type: Number,
default: 5
},
transitionDuration: {
type: Number,
default: 500
},
easing: {
type: String,
default: "ease"
},
threshold: {
type: Number,
default: 0.5
}
``