@volleytravel/vue-img-lazy

A Vue.JS component for lazy loading images as they come into view on the page. Uses vanilla-lazyload under the hood.

Usage

You use <img-lazy> anywhere you'd ordinarily use <img>, with the same attributes you'd ordinarily use, and let the component take care of the rest!

For example, using it in a Vue SFC.

<script>
import ImgLazy from '@volleytravel/vue-img-lazy';
import '@volleytravel/vue-img-lazy/dist/imgLazy.css'

export default {
  name: 'ExampleComponent',
  components: {
    ImgLazy,
  },
};
</script>

<template>
  <div>
    <!-- Simplest usage -->
    <img-lazy src="/images/kittens.jpg" />
    
    <!-- Any attributes you'd ordinarily use on <img> will work too -->
    <img-lazy
      src="/images/kittens.jpg"
      srcset="/images/kittens.jpg, /images/[e-mail] 2x"
      alt="So. Many. Kittens!"
    />
    
    <img-lazy
      src="/images/kittens.jpg"
      crossorigin="anonymous"
    />
  </div>
</template>

If you'd prefer to globally register it for use anywhere in your app, just add this in your entry point (main.js):

import Vue from 'vue';
import ImgLazy from '@volleytravel/vue-img-lazy';
import '@volleytravel/vue-img-lazy/dist/imgLazy.css'

Vue.component('img-lazy', ImgLazy);

In either case, remember to import the CSS! Without it, things will still work, but you may notice images taking up no space, then expanding to fit when they load (yuck!). The CSS simply applies visibility: hidden while the image has not yet triggered the lazy load.

Bugs / Feedback / Contributing

Open a Github issue or send us a pull request.

If you do submit a pull request, you agree to license your code under the same terms that are found in this repo's LICENSE file (it's super-common MIT license).