Lightweight Image/Picture lazyload based on Intersection API.
Please note that this lib is on very early stage.
Lightweight Picture tag support Will be added soon
yarn add vue-lazy // or npm install vue-lazyimport 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
