Picture lazyload based on Intersection API (original) (raw)

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

Will be added soon

`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

Image with known width (prevent jumping content on page)

Picture

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

Development

Install necessary depandancies with yarn or npm

Run Storybook for development mode

Release

Contribution

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

License

MIT