Vue.js and Vanilla JS progressive-image module

progressive-image for vue.js

Make you images appear to load in a progressive-way with the progressive-image module for Vanilla JavaScript and Vue 1.0+ & 2.0.

Check the Demo.

Example

For Vue.js

Install

$ npm install progressive-image --save

$ yarn add progressive-image

import css

<link href="./node_modules/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

or

<link href="//unpkg.com/progressive-image/dist/index.css" rel="stylesheet" type="text/css">

JS

import Vue from 'vue'
import progressive from 'progressive-image/dist/vue'

Vue.use(progressive, {
  removePreview: true
})

Template

<div v-for="item in imgs">
    <div class="space"></div>
    <div class="progressive">
        <img class="preview" v-progressive="item.src" 
            :data-srcset="item.srcset" :src="item.preview" 
        />
    </div>
</div>

You can find the usage example for Vanilla JS and demo on GitHub.