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.