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-lazy importVuefrom'vue'importVueLazyfrom'vue-lazy'import'vue-lazy/dist/vue-lazy.css'Vue.use(VueLazy)import{LazyImage}from'vue-lazy'import'vue-lazy/dist/vue-lazy.css'exportdefault{components: { LazyImage }}If you want to see live examples, please jump to Storybook page.
<lazy-imagesrc="https://via.placeholder.com/250" alt="example aternative text" /><lazy-imagesrc="https://via.placeholder.com/250" alt="example aternative text" width="250" height="250" /><lazy-imagesrc="https://via.placeholder.com/250" alt="example aternative text" tag="picture" ><sourcemedia="(min-width:1366px)" srcset="https://via.placeholder.com/1360x300"><sourcemedia="(min-width:1024px)" srcset="https://via.placeholder.com/1024x300"></lazy-image>Install necessary depandancies with yarn or npm
yarn // or npm install Run Storybook for development mode
yarn storybook:dev Release
yarn release If you have a feature request then feel free to start a new issue, or just grab existing one.
MIT