vue-lazy-image

This plugin lets you lazy load images making use of IntersectionObserver. This plugin is Vue V3 compatible.

Planned features

- Observe images based on class instead of unique ids (make it configurable trough options)

Usage

$3

``shell
npm install @techassi/vue-lazy-image --save
`

or

`shell
yarn add @techassi/vue-lazy-image
`

$3

main.js

`js
import { createApp } from 'vue';
import App from './App.vue';

import VueLazyImage from '@techassi/vue-lazy-image';

createApp(App).use(VueLazyImage).mount('#app');
`

YourComponent.vue

`vue

`

$3

main.js

`js
import { createApp } from 'vue';
import App from './App.vue';

import VueLazyImage from '@techassi/vue-lazy-image';

const intersectionObserverOptions = {};
createApp(App).use(VueLazyImage, intersectionObserverOptions).mount('#app');
`

YourComponent.vue

`vue

`

For detailed Intersection observer options see here

#### Available Events

- @intersected: This event triggers when the image intersects with the viewport
- @loaded: This event triggers when the image is loaded
- @error: This event triggers when there was an error loading the image

Contributing / Building

Contributions and pull request are welcome!

`shell
cd vue-lazy-image
yarn install / npm install
yarn run build / npm run build
``