Skip to content

simplistic vue.js directive for image lazy loading

Notifications You must be signed in to change notification settings

nkoehring/v-lazy-img

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

<template>
  <img class="lazy-loaded" v-lazy-load='fullimage' src='./assets/previewimage.jpg' />
  <div class="lazy-loaded" v-lazy-load-bg='fullbackground' src='./assets/previewbackground.jpg' />
</template>

<script>
import fullimage from './assets/fullimage.png'
import fullbackground from './assets/fullbackground.png'

export default {
  data () {
    return { fullimage, fullbackground }
  }
}
</script>

<style>
.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;
}

</style>

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

similar projects (as listed at awesome-vue)

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!

About

simplistic vue.js directive for image lazy loading

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

Packages

No packages published