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

Installation

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

yarn add @techassi/vue-lazy-image

Basic usage

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

<template>
    <lazy-image :src="PATH_TO_IMAGE" :id="UNIQUE_ID"></lazy-image>
</template>

Advanced usage

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

<template>
    <lazy-image
        :src="PATH_TO_IMAGE"
        :id="UNIQUE_ID"
        :use-picture="TRUE / FALSE"
        @EVENT="CALLBACK"
    ></lazy-image>
</template>

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!

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

Package detail

@techassi/vue-lazy-image

readme