https://github.com/thangman22/vue-lazy-this

Vue.js plugin for lazy load with IntersectionObserverApi
https://github.com/thangman22/vue-lazy-this

Last synced: about 1 month ago
JSON representation

Vue.js plugin for lazy load with IntersectionObserverApi

• Host: GitHub
• URL: https://github.com/thangman22/vue-lazy-this
• Owner: thangman22
• License: mit
• Archived: true
• Created: 2017-09-05T10:10:35.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-09-17T10:23:33.000Z (over 4 years ago)
• Last Synced: 2024-02-29T11:24:00.089Z (3 months ago)
• Language: JavaScript
• Size: 15.2 MB
• Stars: 9
• Watchers: 3
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (Components & Libraries / UI Utilities)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (Components & Libraries / UI Utilities)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (Components & Libraries / UI Utilities)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (Components & Libraries / UI Utilities)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (Components & Libraries / UI Utilities)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (Components & Libraries / UI Utilities)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (Components & Libraries / UI Utilities)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (Components & Libraries / UI Utilities)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (Components & Libraries / UI Utilities)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (UI Utilities / Lazy Load)
• awesome-vue - vue-lazy-this ★9 - Lazyloading component using Intersection Observer API. (UI Utilities / Lazy Load)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (UI Utilities / Lazy Load)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (UI Utilities / Lazy Load)
• awesome-vue. - vue-lazy-this - Lazyloading component using Intersection Observer API. (UI Utilities / Lazy Load)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (UI Utilities / Lazy Load)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (UI Utilities / Lazy Load)
• awesome-vue - vue-lazy-this - Lazyloading component using Intersection Observer API. (Components & Libraries / UI Utilities)
• awesome-vuejs - vue-lazy-this - Lazyloading component using Intersection Observer API. (UI Utilities / Lazy Load)

README

        
# 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

``` bash

npm install vue-lazy-this

#or

yarn add vue-lazy-this

```

## Usage

On javascript file

``` javascript

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

``` HTML

  

    

    // In case not show on view port yet

    

  

```

## 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 }**

[link]: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API