🐌 vue-tiny-lazyload-img
A small size Vue.js directive for lazy loading images using IntersectionObserver API
Demo Page
https://mazipan.github.io/vue-tiny-lazyload-img/
Usage
Download
npm install vue-tiny-lazyload-img// ORyarn add intersection-observer
Install Plugin
Vue;
HTML Snippet
Please Use polyfill
This plugin using IntersectionObserver
, so please use polyfill if you need support old browser https://github.com/w3c/IntersectionObserver/tree/master/polyfill
$ yarn add intersection-observer // then add polyfill for IntersectionObserver in your main app
Build Setup
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production demo with minificationnpm run build:demo# build for plugin distribution filenpm run build:lib
Credit
Based on this awesome article: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
Copyright © 2018 Built with ❤️ by Irfan Maulana