Vue.js plugin for lazy load with IntersectionObserverApi
Switch branches/tags
Nothing to show
Clone or download
Latest commit 98427c2 Sep 12, 2017
Permalink
Failed to load latest commit information.
example Update Examplea Sep 12, 2017
src Update Read me Sep 12, 2017
tests init Sep 5, 2017
.babelrc Add babelrc Sep 9, 2017
.gitignore Add test coverage to gitignore Sep 9, 2017
LICENSE Initial commit Sep 5, 2017
README.md Update Read me Sep 12, 2017
package.json Update version Sep 12, 2017
webpack.config.js init Sep 5, 2017
yarn.lock init Sep 5, 2017

README.md

Vue.js Lazy This

Lazyloading component using Intersection Observer API. This plugin will help you to show and hide component base on viewport showing

Install

npm install vue-lazy-this

#or

yarn add vue-lazy-this

Usage

On javascript file

import LazyThis from 'vue-lazy-this'

Vue.use(LazyThis, options)

//or

const DEFAULT_OPT = {
  config: {
    rootMargin: '50px 0px',
    threshold: 0.01
  },
  minimumIntersectionRatio: 0,
  visible: false,
  autoUnobserve: true
}

Vue.use(LazyThis, DEFAULT_OPT)

On template

  <lazy-this>
    <img slot="onEnter" src="https://dummyimage.com/640x4:3/"/>
    // In case not show on view port yet
    <img slot="onNotEnter" src="https://dummyimage.com/640x4:3/"/>
  </lazy-this>

Options

minimumIntersectionRatio

Minimum ratio for intersection for display component

default: 0

autoUnobserve

Auto UnObserve when Component out of view port. This feature will make component permanently visible after first trigger.

default: true

config

Support native options for IntersectionObserverAPI follow this link

default: { rootMargin: '50px 0px', threshold: 0.01 }