progressive-image
A dead simple progressive-image module for Vanilla JavaScript and Vue.js 1.0+ & 2.0+
GitHub
NPM
update
@v1.1.0
add the scale option for origin image animation
Install
$ npm install progressive-image --save
$ yarn add progressive-imageFor Vanilla JS
demo
Usage
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">HTML
<main id="app">
<div class="progressive">
<img class="preview lazy" data-src="http://7xiblh.com1.z0.glb.clouddn.com/progressive/1.jpg" src="http://7xiblh.com1.z0.glb.clouddn.com/progressive/r1.jpg" />
</div>
<div class="progressive">
<img class="preview lazy" data-src="http://7xiblh.com1.z0.glb.clouddn.com/progressive/2.jpg" src="http://7xiblh.com1.z0.glb.clouddn.com/progressive/r2.jpg" />
</div>
</main>
<script src="./dist/index.js"></script>JS
(function(){
new Progressive({
el: '#app',
lazyClass: 'lazy',
removePreview: true
scale: true
}).fire()
})()For Vue.js
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">HTML
<main id="app">
<template 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>
</template>
</main>JS
import Vue from 'vue'
import progressive from 'progressive-image/dist/vue'
Vue.use(progressive, {
removePreview: true,
scale: true
})
new Vue({
name: 'demo',
el: '#app',
data: {
imgs: [
{
src: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/2.jpg',
preview: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/r2.jpg'
},
{
src: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/3.jpg',
preview: 'http://7xiblh.com1.z0.glb.clouddn.com/progressive/r3.jpg'
}
]
}
})build
build dist
npm run buildbuild demo
npm run demo