Lightweight Image/Picture lazyload based on Intersection API.
Please note that this lib is on very early stage.
Will be added soon
yarn add vue-lazy // or npm install vue-lazy
import Vue from 'vue' import VueLazy from 'vue-lazy' import 'vue-lazy/dist/vue-lazy.css' Vue.use(VueLazy)
import { LazyImage } from 'vue-lazy' import 'vue-lazy/dist/vue-lazy.css' export default { components: { LazyImage } }
If you want to see live examples, please jump to Storybook page.
<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" />
<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>
Install necessary depandancies with yarn or npm
Run Storybook for development mode
Release
If you have a feature request then feel free to start a new issue, or just grab existing one.
MIT
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4