vue-coe-image
image-component
Last updated 9 months ago by viniazvd .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-coe-image 
SYNC missed versions from official npm registry.

vue-coe-image ✅

<q>Component for progressive and lazy rendering images inspired by: Intersection Observer API </q>

License


Example


Explanation https://developers.google.com/web/tools/lighthouse/audits/offscreen-images


Disclaimer

In the past, it was very difficult and expensive to detect the visibility of a particular element.

The Intersection Observer API solves this problem in a really organized, efficient and performative way. It provides a workable template that we can observe to be notified when an element enters the viewport.


Competitive Diferentials

  • Loads image only when it enters the viewport (check in browser network)
  • Progressive image loading with animations
  • Performant progressive blur using SVG
  • You receive intersection events to decide whether or not to perform tasks or animation processes based on whether the user will see the result or not.

Warning
The IntersectionObserver API is not fully supported by all modern browsers just yet, but there’s a polyfill for it maintained by the w3c.


Install

yarn add vue-coe-image

Include Plugin (to import globally)

import Vue from 'vue'

import 'vue-coe-image/dist/vue-coe-image.css'
import { VueCoeImage } from 'vue-coe-image'

Vue.use(VueCoeImage)

Register in component (to import locally)

<script>
import VueCoeImage from 'vue-coe-image'

export default {
  components: { VueCoeImage }
  ...
</script>

Pay Attention

You need to import the style file so the animations will work!

I recommend doing this on a global level.

import 'vue-coe-image/dist/vue-coe-image.css'

Use

<template>
  <div>
    <vue-coe-image
      :src="src"
      fallback="https://i.ytimg.com/vi/Yt9t9e9gmmw/maxresdefault.jpg"
    />
    <button @click="changeImage">coe</button>
  </div>
</template>

<script>
import VueCoeImage from 'vue-coe-image'

export default {
  components: { VueCoeImage },

  data () {
    return {
      src: 'https://3.bp.blogspot.com/-PRG407gZ9bE/V0TCSHFQKcI/AAAAAAAADjE/KbkLmxIXcjMcx4hKTFnDSQxcdPqGuNNWwCLcB/s1600/flamengologo.png'
    }
  },

  methods: {
    changeImage () {
      this.src = 'https://www.urbanarts.com.br/imagens/produtos/065033/Detalhes/urubu-do-mengao.jpg'
    }
  }
}
</script>

A Note on Performance

Observe the elements occupy memory and CPU!

For this reason, immediately after finding the element, we use an instance method named disconnect to stop observing and make the lib more performative.


Props

Name type required About
loaderImage String false shows while the image is not loaded (has a default)
src String true Image to load when crossing viewport
srcset String false Images to be used for different resolutions
fallback String false Also known as a 'placeholder', this prop avoids an error if it fails or delays loading the image.
animation Bollean false Animation handler (default is true)
intersectionOptions Object false options by mdn
delay String false Delay to show image
blurLevel Number false Blur animation
duration Number false Animation duration time

Events

Name About
intersect Triggered when the image crosses the viewport for more complex animations and state manipulation
error Triggered when an image upload error occurs

Current Tags

  • 0.2.1                                ...           latest (9 months ago)

12 Versions

  • 0.2.1                                ...           9 months ago
  • 0.2.0                                ...           10 months ago
  • 0.1.9                                ...           10 months ago
  • 0.1.8                                ...           10 months ago
  • 0.1.7                                ...           2 years ago
  • 0.1.6                                ...           2 years ago
  • 0.1.5                                ...           2 years ago
  • 0.1.4                                ...           2 years ago
  • 0.1.3                                ...           2 years ago
  • 0.1.2                                ...           2 years ago
  • 0.1.1                                ...           2 years ago
  • 0.1.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (3)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |