A small size Vue.js directive for lazy loading images using IntersectionObserver API

https://mazipan.github.io/vue-tiny-lazyload-img/

npm install vue-tiny-lazyload-img // OR yarn add intersection-observer

import VueTinyLazyloadImg from 'vue-tiny-lazyload-img' Vue.use(VueTinyLazyloadImg);

<img v-lazyload src="./assets/logo.png" data-src="./assets/logo-success.png" data-err="./assets/logo-error.png">

This plugin using IntersectionObserver, so please use polyfill if you need support old browser

• Using polyfill by @philipwalton

$ yarn add intersection-observer // then add polyfill for IntersectionObserver in your main app require('intersection-observer')

• The easiest way to load the IntersectionObserver polyfill and have it work in the widest range of browsers is via polyfill.io, which will automatically include dependencies where necessary:

<script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production demo with minification npm run build:demo # build for plugin distribution file npm run build:lib

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