Vue Lazy Image Loading
Vue progressive image and background loading plugin.
Installation
npm install vue-lazy-image-loading
Usage
Vue
Lazy image
Instead of using the normal img
tag to load images
use the lazy-img
component already globally available after the plugin installation
Lazy background
It is also possible to apply lazy images as backgrounds and it will have the same props as the lazy-img component
Global properties
There is all properties you can use for both lazy-img
and lazy-background
components.
Placeholder
To be able to immediately show some feedback to the user, it is possible to pass a placeholder image, which could be also 1% the size of the main image: it will be blurred so you can go crazy with optimizations here.
In this example I actually use the same image, but you have the idea here
Blur
It is possible to adjust the level of blur applied to the placeholder image
Ratio
It is possible to remove the padding that adds the aspect ratio to the container.
It is also possible to manually specify the image aspact ratio when you know it. It allows the placeholder to be displayed in the correct aspect ratio. The ratio is calculated as height / width
.
lazy-background
properties
There is all properties you can use for the lazy-background
component only.
Background position
Allows you to set the value of the background-position
CSS property.
The default value is 0% 0%
.
Background size
Allows you to set the value of the background-size
CSS property.
The default value is cover
.
Background repeat
Allows you to set the value of the background-repeat
CSS property.
The default value is no-repeat
.
The slot
The lazy-background has a "content" slot, which can hold content that needs to be rendered over the background image and also can hold a preloader. This slot has one property called "visible" that tells you when, for example, a preloader needs to be visible or not.
I am some content to display over the image I am the preloader
Image fallback
In case of a loading error of the main image, it is possible to add a fallback image which can display an error image or just another image.
Vue Loader - Asset URL Handling
If you're using Vue Loader, it's Asset URL transforms will not work with our lazy-img
and lazy-background
elements by default.
By default the following tag/attribute combinations are transformed, and can be configured using the transformAssetUrls option:
video: 'src' 'poster' source: 'src' img: 'src' image: 'xlink:href'
All you have to is to add our lazy-img
and lazy-background
tags to the transformAssetUrls
object:
video: 'src' 'poster' source: 'src' img: 'src' image: 'xlink:href' 'lazy-img': 'src' 'lazy-background': 'src'
Now, Vue Loader's Asset URL transforms will work with our elements too.
Events
Each component emits an event whenever an image is loaded.
Because we usually load two images, a main image and a placeholder, two events are dispatched onLoad
and onLoadPlaceholder
in your js file
methods: { // main image is loaded } { // placeholder image is loaded } { // main image error } { // placeholder image error }
in the html just add the events you need to listen to
Options
During the installation process it is possible to pass some default global options
Cached images
- type: Boolean
- default: true
Cached images are checked by default. This check kills the animation if the image was already loaded once. If you would like to show the animation every time, even when is not needed, you can simply use the plugin options like so:
Vue
placeholder
- type: String
- required: false
Vue
blur
- type: Number
- required: false
- default: 5
Vue
delay
- type: Number
- default: 0
This options is for debug only. It lets you have an easy look at the placeholder before the main image is fully loaded.
Vue
position
- type: String
- default: '0% 0%'
Allows you to set the value of the background-position
CSS property.
Will only work lazy-background
component.
Vue
size
- type: String
- default: 'cover'
Allows you to set the value of the background-size
CSS property.
Will only work lazy-background
component.
Vue
repeat
- type: String
- default: 'no-repeat'
Allows you to set the value of the background-repeat
CSS property.
Will only work lazy-background
component.
Vue
Global options like placeholder
and blur
will be applied only to components that don't specify their own options