https://github.com/tolking/vue-lazy-loading
a vue plugin to better supporting native lazy-loading for image and iframe
https://github.com/tolking/vue-lazy-loading
backgroundimage iframe img lazy lazy-loading vue
Last synced: 3 months ago
JSON representation
a vue plugin to better supporting native lazy-loading for image and iframe
- Host: GitHub
- URL: https://github.com/tolking/vue-lazy-loading
- Owner: tolking
- License: mit
- Created: 2020-06-25T05:47:25.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-16T04:29:29.000Z (almost 5 years ago)
- Last Synced: 2025-07-30T02:17:13.719Z (4 months ago)
- Topics: backgroundimage, iframe, img, lazy, lazy-loading, vue
- Language: TypeScript
- Homepage:
- Size: 28.3 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-lazy-loading - a vue plugin to better supporting native lazy-loading for image and iframe (UI Utilities [🔝](#readme))
- awesome-vue - vue-lazy-loading - A vue plugin to better supporting native lazy-loading for image and iframe. (Components & Libraries / UI Utilities)
README
# vue-lazy-loading
> a vue plugin to better supporting lazy loading for image and iframe
**The plugin will preferentially use native image and iframe [lazy-loading](https://caniuse.com/#feat=loading-lazy-attr), if the browser does not support it, it will be implemented through [IntersectionObserver](https://caniuse.com/#feat=intersectionobserver)**
## Installation
``` sh
yarn add vue-lazy-loading
# or
npm i vue-lazy-loading
```
## Usage
``` js
// Vue 3.X
import { createApp } from 'vue'
import LazyLoading from 'vue-lazy-loading'
createApp(App)
.use(LazyLoading)
.mount('#app')
// Vue 2.X
import Vue from 'vue'
import LazyLoading from 'vue-lazy-loading'
Vue.use(LazyLoading)
```
``` html
![]()
![]()
![]()
background
background
import logo from './assets/logo.png'
export default {
data() {
return {
logo: logo
}
}
}
```
## Options
### useNative
- Type: `Boolean`
- Default: `true`
- Required: `false`
Use the native image lazy-loading for the web
### rootMargin
- Type: `String`
- Default: `200px`
- Required: `false`
rootMargin for IntersectionObserver
## Loading animation
Loading animation is not included by default. You can use it this way
``` css
img,
iframe {
background: rgba(50, 50, 50, 0.3) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="white"><path opacity=".25" d="M16 0 A16 16 0 0 0 16 32 A16 16 0 0 0 16 0 M16 4 A12 12 0 0 1 16 28 A12 12 0 0 1 16 4"/><path d="M16 0 A16 16 0 0 1 32 16 L28 16 A12 12 0 0 0 16 4z"><animateTransform attributeName="transform" type="rotate" from="0 16 16" to="360 16 16" dur="0.8s" repeatCount="indefinite" /></path></svg>') center no-repeat;
}
```
## Browser Support
Available in [latest browsers](http://caniuse.com/#feat=intersectionobserver). If browser support is not available (eg IE), then make use of this [polyfill](https://www.npmjs.com/package/intersection-observer).
``` js
require('intersection-observer')
import LazyLoading from 'vue-lazy-loading'
```
## License
[MIT](http://opensource.org/licenses/MIT)