vue-lazy v0.2.4

vue-lazy

Lightweight Image/Picture lazyload based on Intersection API.

About

Please note that this lib is on very early stage.

Storybook

• 📕 Example
• 📺 Props/Events/Slots

Benefits

• Lightweight
• Picture tag support

Installation & Usage

Vue@3 version

Installation

  yarn add vue-lazy@next // or npm install vue-lazy@next

Usage - Globally

import { createApp } from 'vue'
import App from './App.vue'

import VueLazy from 'vue-lazy'
import 'vue-lazy/dist/vue-lazy.css'

const myApp = createApp(App)

myApp.use(VueLazy)
myApp.mount('#app')

Usage - Locally

import { LazyImage } from 'vue-lazy'
import 'vue-lazy/dist/vue-lazy.css'

export default {
  components: { LazyImage }
}

Vue@2 version

Installation

  yarn add vue-lazy // or npm install vue-lazy

Usage - Globally

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

Vue.use(VueLazy)

Usage - Locally

import { LazyImage } from 'vue-lazy'
import 'vue-lazy/dist/vue-lazy.css'

export default {
  components: { LazyImage }
}

Example usage

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>

Development

Install necessary depandancies with yarn or npm

  yarn // or npm install

Run Storybook for development mode

  yarn storybook:dev

Release

  yarn release

Contribution

If you have a feature request then feel free to start a new issue, or just grab existing one.

License

MIT