vue-lazy

0.2.4 • Public • Published

npm version npm bundle size license

vue-lazy

Lightweight Image/Picture lazyload based on Intersection API.

About

Please note that this lib is on very early stage.

Storybook

Benefits

  • Lightweight
  • Picture tag support

Usage

There are two ways to use it.

Globally

import Vue from 'vue'
import VueLazy from 'vue-lazy'
import 'vue-lazy/dist/vue-lazy.css'
 
Vue.use(VueLazy)

Locally

import { LazyImage } from 'vue-lazy'
import 'vue-lazy/dist/vue-lazy.css'
 
export default {
  components: {
    LazyImage
  }
}

Examples

If you want to see live examples, please jump to Storybook page.

Image

<lazy-image
  src="https://via.placeholder.com/250"
  alt="example aternative text"
/>

Image with known width (prevent jumping content on page)

<lazy-image
  src="https://via.placeholder.com/250"
  alt="example aternative text"
  width="250"
  height="250"
/>

Picture

<lazy-image
  src="https://via.placeholder.com/250"
  alt="example aternative text"
  tag="picture"
>
  <source media="(min-width:1366px)" srcset="https://via.placeholder.com/1360x300">
  <source media="(min-width:1024px)" srcset="https://via.placeholder.com/1024x300">
</lazy-image>

Contribution

Feel free to grab an issue from the list, just remember to squash your commits before merge.

Package Sidebar

Install

npm i vue-lazy

Weekly Downloads

5

Version

0.2.4

License

MIT

Unpacked Size

36.4 kB

Total Files

18

Last publish

Collaborators

  • smugers