A small size Vue.js v.2+ directive for lazy loading images

by Vue.js Examples

vue-tiny-lazyload-img

A small size Vue.js v.2+ directive for lazy loading images.

View demo Download Source

Usage

Download

npm install vue-tiny-lazyload-img

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 https://github.com/w3c/IntersectionObserver/tree/master/polyfill

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

# build for plugin distribution file
npm run pack

# run build and pack
npm run dist

GitHub