cl-progressive-image v1.0.6

Progressive image loading

A way to display large images on slow connections.

This is a vue component for loading and displaying images. It works in two steps. Blury small image is displayed instantly. When large image is fully loaded it fades in instead of small blury image. Consider slow connections. It doesn't block UI when image is being loaded.

Installation

npm install cl-progressive-image --save

Usage example

<template>
  <div>
    <ProgressiveImage srcSmall="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" srcLarge="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg" />
  </div>
</template>

<script>
import ProgressiveImage from 'cl-progressive-image'

export default {
  name: 'ParentComponent',
  components: {
    ProgressiveImage
  }
}
</script>

Parameters

Meta

coolemur@gmail.com

No license required.