https://github.com/nkoehring/v-lazy-img
simplistic vue.js directive for image lazy loading
https://github.com/nkoehring/v-lazy-img
image-loader vue-directive vuejs vuejs2
Last synced: 2 months ago
JSON representation
simplistic vue.js directive for image lazy loading
- Host: GitHub
- URL: https://github.com/nkoehring/v-lazy-img
- Owner: nkoehring
- Created: 2017-03-14T11:46:42.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:56:13.000Z (almost 3 years ago)
- Last Synced: 2025-09-21T04:11:13.178Z (3 months ago)
- Topics: image-loader, vue-directive, vuejs, vuejs2
- Language: JavaScript
- Size: 438 KB
- Stars: 26
- Watchers: 4
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-vue - v-lazy-img - simplistic vue.js directive for image lazy loading (UI Utilities [🔝](#readme))
- awesome-vue-zh - V-懒惰IMG - 用于Vue 2逐行图像加载的微小 (\<0.6kb) 指令. (UI实用程序 / 延迟加载)
- awesome-vue - v-lazy-img - Tiny (<0.6kb) directive for progressive image loading for Vue 2. (Components & Libraries / UI Utilities)
- awesome-vue - v-lazy-img ★20 - Tiny (<0.6kb) directive for progressive image loading for Vue 2. (UI Utilities / Lazy Load)
- awesome-vue - v-lazy-img - Tiny (<0.6kb) directive for progressive image loading for Vue 2. (UI Utilities / Lazy Load)
README
# Vue Progressive Image
Lazy load images while showing a preview. Super tiny, less than half a kilobyte minified and gzipped.
## usage
*v-lazy-img* adds the directives `v-lazy-load` and `v-lazy-load-bg`. The latter changes the background image (css `background-image`) instead of the `src`-attribute.
## Usage example
```html
import fullimage from './assets/fullimage.png'
import fullbackground from './assets/fullbackground.png'
export default {
data () {
return { fullimage, fullbackground }
}
}
.lazy-loaded {
/* setting a fixed width is recommended */
width: 100%;
/* nice effect as an example */
transition: opacity .5s ease-in;
opacity: .5;
}
/* applied as soon as loading starts */
.lazy-loaded.lazy-load-progress {
filter: blur(5px);
}
/* applied as soon as loading succeeds */
.lazy-loaded.lazy-load-success {
opacity: 1;
}
/* applied if loading fails */
.lazy-loaded.lazy-load-error {
filter: blur(3px) sepia(1);
outline: 4px solid red;
}
```
## current state
*v-lazy-img* started as a proof of concept but is simple enough to be usable already. If you are using it in your project, I'm looking forward to hear about your experiences!
## todo
Additional features could include
- srcset support
- a loading indicator
- Vue3 support
- support new `loading` attribute (https://caniuse.com/#feat=loading-lazy-attr)
## similar projects (as listed at [awesome-vue](https://github.com/vuejs/awesome-vue))
- [vue-lazyload](https://github.com/hilongjw/vue-lazyload) - A Vue.js plugin for lazyload your Image or Component in your application.
- [vue-lazy-background-images](https://github.com/darrynten/vue-lazy-background-images) - Lazy load background images for Vue 2.
- [vue-progressive-image](https://github.com/MatteoGabriele/vue-progressive-image) - Vue progressive image loading plugin.
- [vue-l-lazyload](https://github.com/lsycxyj/vue-l-lazyload) - A lazyload plugin for Vue.js v2.x+.
- [vue-lazyload-img](https://github.com/JALBAA/vue-lazyload-img) - Especially optimized for mobile browser. support V2 & v1.
- [vue-lazy-images](https://github.com/yyh1102/vue-lazyload-images) - A plugin of lazyload images for Vue 2.x.
And quiet some more: https://github.com/vuejs/awesome-vue#lazy-load
### So why another one?
I didn't try all of the above but as mentioned under _current state_ I mainly wanted to try it by myself. The result is also incredibly small: **Under 500 bytes minimized and gzipped!**