Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/murongg/vue3-lazyload
A Vue3.x image lazyload plugin
https://github.com/murongg/vue3-lazyload
lazyload plugin vue vue3
Last synced: 5 days ago
JSON representation
A Vue3.x image lazyload plugin
- Host: GitHub
- URL: https://github.com/murongg/vue3-lazyload
- Owner: murongg
- Created: 2020-10-13T06:18:44.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-28T03:09:19.000Z (12 months ago)
- Last Synced: 2024-10-30T08:18:02.213Z (4 months ago)
- Topics: lazyload, plugin, vue, vue3
- Language: TypeScript
- Homepage: https://murongg.github.io/vue3-lazyload/
- Size: 534 KB
- Stars: 167
- Watchers: 2
- Forks: 20
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# vue3-lazyload
A vue3.x image lazyload plugin.
## 🚀 Features
- ⚡ **0 dependencies:** No worry about your bundle size
- 🦾 **Type Strong:** Written in Typescript
- 🌎 **Browser support:** Use it through CDN
- 😊 **Support Hook:** useLazyload
## 📎 Installation
```sh
$ npm i vue3-lazyload
# or
$ yarn add vue3-lazyload
```
## 🌎 CDN
CDN: https://unpkg.com/vue3-lazyload
```html
Vue.createApp(App).use(VueLazyLoad)
...
```
## 👽 Usage
main.js:
```js
import { createApp } from 'vue'
import VueLazyLoad from 'vue3-lazyload'
import App from './App.vue'
const app = createApp(App)
app.use(VueLazyLoad, {
// options...
})
app.mount('#app')
```
App.vue:
```html
![]()
```
### v-lazy use object params
```vue
![]()
```
### Use lifecycle
In main.js
```js
import { createApp } from 'vue'
import VueLazyLoad from 'vue3-lazyload'
import App from './App.vue'
const app = createApp(App)
app.use(VueLazyLoad, {
loading: '',
error: '',
lifecycle: {
loading: (el) => {
console.log('loading', el)
},
error: (el) => {
console.log('error', el)
},
loaded: (el) => {
console.log('loaded', el)
}
}
})
app.mount('#app')
```
or
In xxx.vue
> Have to be aware of is v-lazy don't use v-lazy="lazyOptions", in this case, vue cannot monitor data changes.
```vue
import { reactive } from 'vue'
export default {
name: 'App',
setup() {
const lazyOptions = reactive({
src: 'your image url',
lifecycle: {
loading: (el) => {
console.log('image loading', el)
},
error: (el) => {
console.log('image error', el)
},
loaded: (el) => {
console.log('image loaded', el)
}
}
})
return {
lazyOptions,
}
}
}
![]()
```
### Use Hook
```vue
import { ref } from 'vue'
import { useLazyload } from 'vue3-lazyload'
export default {
name: 'App',
setup() {
const src = ref('/example/assets/logo.png')
const lazyRef = useLazyload(src, {
lifecycle: {
loading: () => {
console.log('loading')
},
error: () => {
console.log('error')
},
loaded: () => {
console.log('loaded')
}
}
})
return {
lazyRef
}
}
}
![]()
```
#### Use css state
There are three states while image loading.
You can take advantage of this feature, make different css controls for different states.
- `loading`
- `loaded`
- `error`
```html
```
```css
img[lazy=loading] {
/*your style here*/
}
img[lazy=error] {
/*your style here*/
}
img[lazy=loaded] {
/*your style here*/
}
```
### Delay loading of images
To avoid loading images that are only shortly visible (e. g. fast scrolling through list of images), a delay in milliseconds can be configured.
If a delay is set, an image is only loaded if it stays visible for the specified amount of time.
Set delay in object parameter:
```vue
![]()
```
## 📁 Options
| key | description | default | type |
| --------------- | ----------------------------------------------------------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| loading | The image used when the image is loaded | - | string |
| error | The image used when the image failed to load | - | string |
| observerOptions | IntersectionObserver options | { rootMargin: '0px', threshold: 0.1 } | [IntersectionObserverInit]([链接地址](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver)) |
| log | Do print debug info | true | boolean |
| logLevel | Log level | error | 'error' \| 'warn' \| 'info' \| 'debug' \| 'log' |
| lifecycle | Specify state execution function | - | [Lifecycle](#Lifecycle) |
| delay | Time in milliseconds an image has to stay visible before loading starts | 0 | number |
## ⛱ Lifecycle Hooks
| key | description |
| ------- | ---------------- |
| loading | Image loading |
| loaded | Image loaded |
| error | Image load error |
## [Contributors](https://github.com/murongg/vue3-lazyload/graphs/contributors)
