vue-coe-image ✅

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)
``javascript
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)
`vue

`

Pay Attention


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

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

Use
`vue



`

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