Vue Progressive Image
Lazy load images while showing a preview
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
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
awesome-vue)
similar projects (as listed at- vue-lazyload - A Vue.js plugin for lazyload your Image or Component in your application.
- vue-lazy-background-images - Lazy load background images for Vue 2.
- vue-progressive-image - Vue progressive image loading plugin.
- vue-l-lazyload - A lazyload plugin for Vue.js v2.x+.
- vue-lazyload-img - Especially optimized for mobile browser. support V2 & v1.
- vue-lazy-images - A plugin of lazyload images for Vue 2.x.
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 600 bytes minimized and gzipped!