https://github.com/techassi/vue-lazy-image
Lazy load images in Vue 3 backed by the IntersectionObserver API
https://github.com/techassi/vue-lazy-image
intersection-observer typescript vue vuejs
Last synced: 4 months ago
JSON representation
Lazy load images in Vue 3 backed by the IntersectionObserver API
- Host: GitHub
- URL: https://github.com/techassi/vue-lazy-image
- Owner: Techassi
- Created: 2023-02-07T23:24:38.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-01T22:39:52.000Z (almost 3 years ago)
- Last Synced: 2025-03-01T18:19:54.833Z (11 months ago)
- Topics: intersection-observer, typescript, vue, vuejs
- Language: TypeScript
- Homepage:
- Size: 98.6 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```shell
npm install @techassi/vue-lazy-image --save
```
or
```shell
yarn add @techassi/vue-lazy-image
```
### Basic usage
`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
```
### Advanced usage
`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](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options)
#### 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
```