Skip to content
This repository has been archived by the owner on Aug 19, 2024. It is now read-only.

๐ŸŒ A small size Vue.js directive for lazy loading images using IntersectionObserver API

License

Notifications You must be signed in to change notification settings

mazipan/vue-tiny-lazyload-img

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

85 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐ŸŒ vue-tiny-lazyload-img

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

Travis License version downloads minified

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

$ 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 โค๏ธ by Irfan Maulana