https://github.com/ccforward/progressive-image

A progressive-image module for Vanilla JavaScript and Vue 1.0+ & 2.0+
https://github.com/ccforward/progressive-image

lazy-load progressive-image vue

Last synced: 5 days ago
JSON representation

A progressive-image module for Vanilla JavaScript and Vue 1.0+ & 2.0+

• Host: GitHub
• URL: https://github.com/ccforward/progressive-image
• Owner: ccforward
• License: mit
• Created: 2017-03-21T15:09:35.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-10-26T13:37:06.000Z (about 4 years ago)
• Last Synced: 2024-10-16T04:16:01.868Z (19 days ago)
• Topics: lazy-load, progressive-image, vue
• Language: JavaScript
• Homepage: https://ccforward.github.io/progressive-image/index.html
• Size: 2.52 MB
• Stars: 379
• Watchers: 11
• Forks: 43
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# progressive-image

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

![gif](https://github.com/ccforward/cc/raw/master/Blog/pic/progressive-0.gif)

## GitHub

[GitHub - progressive-image](https://github.com/ccforward/progressive-image)

## NPM

[![NPM version][npm-image]][npm-url]

[NPM - progressive-image](https://www.npmjs.com/package/progressive-image)

## update

#### @v1.1.0

add the `scale` option for origin image animation

## Install

```shell

$ npm install progressive-image --save

 

$ yarn add progressive-image

```

## For Vanilla JS

### demo

[progressive-image-demo](https://ccforward.github.io/progressive-image/index.html)

[progressive-image-vue-demo](https://ccforward.github.io/progressive-image/example/demo-vue.html)

### Usage

#### import css

```html

```

or

```html

```

#### HTML

```html

  


    

  

  


    

  


```

#### JS

```js

(function(){

  new Progressive({

    el: '#app',

    lazyClass: 'lazy',

    removePreview: true

    scale: true

  }).fire()

})()

```

## For Vue.js

#### import css

```html

```

or

```html

```

#### HTML

```html

  

    


    


      

    

  


```

#### JS

```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

```shell

npm run build

```

#### build demo

```shell

npm run demo

```

[npm-url]: https://www.npmjs.com/package/progressive-image

[npm-image]: https://img.shields.io/npm/v/progressive-image.svg