Component for progressive and lazy rendering images inspired by: Intersection Observer API

✨ 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.