Vue progressive image loading plugin

$ npm install vue-progressive-image

import Vue from 'vue'
import VueProgressiveImage from 'vue-progressive-image'

Vue.use(VueProgressiveImage)

Instead of using the normal img tag to load images

<img src="https://unsplash.it/1920/1080?image=10" />

use the progressive-img component already globally available after the plugin installation

<progressive-img src="https://unsplash.it/1920/1080?image=10" />

It is also possible to apply progressive images as backgrounds and it will have the same props as the progressive-img component

<progressive-background src="https://unsplash.it/1920/1080?image=10" />

To be able to immediately show some feedback to the user, it is possible to pass a placeholder image, which could be also 1% the size of the main image: it will be blurred so you can go crazy with optimizations here.

in this example I actually use the same image, but you have the idea here

<progressive-img
  src="https://unsplash.it/1920/1080?image=10"
  placeholder="https://unsplash.it/1920/1080?image=10"
/>

It is possible to adjust the level of blur applied to the placeholder image

<progressive-img
  src="https://unsplash.it/1920/1080?image=10"
  placeholder="https://unsplash.it/1920/1080?image=10"
  :blur="30"
/>

It is possible to remove the padding that adds the aspect ratio to the container.

<progressive-img
  src="https://unsplash.it/1920/1080?image=10"
  no-ratio
/>

In case of a loading error of the main image, it is possible to add a fallback image which can display an error image or just another image.

<progressive-img
  src="https://this_url_should_cause_an_error"
  fallback="https://unsplash.it/1920/1080?image=10"
/>

Each component emits an event whenever an image is loaded.

Because we usually load two images, a main image and a placeholder, two events are dispatched onLoad and onLoadPlaceholder

in your js file

export default {
  methods: {
    onLoad () {
      // main image is loaded
    },
    onLoadPlaceholder () {
      // placeholder image is loaded
    },
    onError (error) {
      // main image error
    },
    onErrorPlaceholder (error) {
      // placeholder image error
    }
  }
}

in the html just add the events you need to listen to

<progressive-img
  @onLoad="onLoad"
  @onLoadPlaceholder="onLoadPlaceholder"
  @onError="onError"
  @onErrorPlaceholder="onErrorPlaceholder"
  src="https://unsplash.it/1920/1080?image=10"
  placeholder="https://unsplash.it/1920/1080?image=10"
/>

During the installation process it is possible to pass some default global options

• type: String
• required: false

Vue.use(VueProgressiveImage, {
  placeholder: 'https://unsplash.it/1920/1080?image=20'
})

• type: Number
• required: false
• default: 5

Vue.use(VueProgressiveImage, {
  blur: 30
})

• type: Number
• default: 0

This options is for debug only. It lets you have an easy look at the placeholder before the main image is fully loaded.

Vue.use(VueProgressiveImage, {
  delay: 2000 // 2 seconds before the image is displayed
})

Global options like placeholder and blur will be applied only to components that don't specify their own options

Please drop an issue, if you find something that doesn't work, or a feature request at https://github.com/MatteoGabriele/vue-progressive-image/issues

Follow me on twitter @matteo_gabriele