Vue-coe-image NPM

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

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

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

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