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
