Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/darrynten/vue-lazy-background-images
Lazy load background images for Vue 2
https://github.com/darrynten/vue-lazy-background-images
Last synced: 17 days ago
JSON representation
Lazy load background images for Vue 2
- Host: GitHub
- URL: https://github.com/darrynten/vue-lazy-background-images
- Owner: darrynten
- License: mit
- Created: 2016-12-10T11:51:06.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-05-26T21:55:57.000Z (over 3 years ago)
- Last Synced: 2024-12-11T11:18:04.742Z (about 2 months ago)
- Language: Vue
- Size: 4.88 KB
- Stars: 66
- Watchers: 3
- Forks: 13
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-lazy-background-images - lazy-background-images?style=social) - 懒加载背景组件的Vue组件 (UI组件)
- awesome-github-vue - vue-lazy-background-images - 懒加载背景组件的Vue组件 (UI组件)
- awesome-github-vue - vue-lazy-background-images - 懒加载背景组件的Vue组件 (UI组件)
- awesome - vue-lazy-background-images - 懒加载背景组件的Vue组件 (UI组件)
README
# Lazy Background Images for Vue
#### vue-lazy-background-images
A simple Vue component for lazy loading background components.
This component is *only* for background images and does not support anything
other than that.
## Installation
```bash
npm install --save-dev vue-lazy-background-images
```
## Usage
Import the component
```js
import VueLazyBackgroundImage from 'vue-lazy-background-images'
```
Register the component
```js
Vue.component('lazy-background', VueLazyBackgroundImage)
```
And put into your DOM
```html
```
And get this out
```html
```
You can see the image-source in the above example is a computed property,
although it doesn't have to be.
The callbacks in the above example are bound to data()
Width and height are for the *image* not the containing div.
## Values
* image-source - The source of the desired image (required)
* loading-image - Path to the loader image (png, svg etc) (required)
* error-image - Path to the error image (required)
* image-class - Any classes you wish to include on the image (optional)
* background-size - CSS background-size value (optional, default is `cover`)
* image-success-callback - Function on success (optional)
* image-error-callback - Function on error (optional)
## Details
#### Knowing state
The component attaches its state as a class, as well as a data- attribute
called `state`
There are 3 states, loading, loaded, and error
There are no events that get emitted, you can access either the classlist or
the dataset to see what state your image is in.
#### Image size
There will be 2x data- attributes on your rendered - `width` and `height` which
is the dimensions of the actual image (not the rendered div)
#### Background size
This is `cover` by default although it can be overridden.
#### Callbacks
You can pass in events to trigger on success and failure. These are completely
optional and are not required for this to work.
#### Notes
Contributions welcome, as long as they are related to background images. Enjoy
the component