🐌
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
// OR
yarn add intersection-observer
Install Plugin
import VueTinyLazyloadImg from 'vue-tiny-lazyload-img'
Vue.use(VueTinyLazyloadImg);
HTML Snippet
<img v-lazyload
src="./assets/logo.png"
data-src="./assets/logo-success.png"
data-err="./assets/logo-error.png">
Please Use polyfill
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>
Build Setup
# 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
Credit
Based on this awesome article: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
Copyright © 2018 Built with
25 Aug 11, 2021
0 Dec 9, 2022
0 Mar 19, 2021
31 Nov 18, 2020
63 Jul 19, 2022
67 Nov 24, 2022
107 Nov 16, 2022
9 Mar 31, 2022
61 Nov 19, 2022
37 Nov 14, 2022
0 Oct 21, 2021
2 Aug 13, 2018
99 Oct 27, 2022
4 Nov 15, 2022
2 Feb 8, 2022
5 Sep 25, 2022
8 Jul 30, 2020
22 Dec 26, 2022
1 Jan 4, 2022