progressive-image

    1.2.0 • Public • Published

    progressive-image

    A dead simple progressive-image module for Vanilla JavaScript and Vue.js 1.0+ & 2.0+

    gif

    GitHub

    GitHub - progressive-image

    NPM

    NPM version

    NPM - progressive-image

    update

    @v1.1.0

    add the scale option for origin image animation

    Install

    $ npm install progressive-image --save
     
    $ yarn add progressive-image

    For Vanilla JS

    demo

    progressive-image-demo

    progressive-image-vue-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 build

    build demo

    npm run demo

    Install

    npm i progressive-image

    DownloadsWeekly Downloads

    419

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • ccforward