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