Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/yyh1102/vue-lazyload-images

A plugin of lazy-load images for Vue2.x
https://github.com/yyh1102/vue-lazyload-images

lazy-loading lazyload-images vue vue-components vue-lazyload-images vue-plugin vue2

Last synced: about 1 month ago
JSON representation

A plugin of lazy-load images for Vue2.x

Host: GitHub
URL: https://github.com/yyh1102/vue-lazyload-images
Owner: yyh1102
License: mit
Created: 2017-04-03T09:06:57.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2018-01-13T07:07:17.000Z (over 6 years ago)
Last Synced: 2024-01-29T10:18:54.312Z (4 months ago)
Topics: lazy-loading, lazyload-images, vue, vue-components, vue-lazyload-images, vue-plugin, vue2
Language: JavaScript
Size: 15.2 MB
Stars: 61
Watchers: 3
Forks: 11
Open Issues: 3
Metadata Files:
- Readme: README.md
- License: LICENSE

Lists

awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (Components & Libraries / UI Utilities)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (Components & Libraries / UI Utilities)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (Components & Libraries / UI Utilities)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (Components & Libraries / UI Utilities)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (Components & Libraries / UI Utilities)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (Components & Libraries / UI Utilities)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (Components & Libraries / UI Utilities)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (Components & Libraries / UI Utilities)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (Components & Libraries / UI Utilities)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (UI Utilities / Lazy Load)
awesome-vue - vue-lazy-images ★59 - A plugin of lazyload images for Vue 2.x. (UI Utilities / Lazy Load)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (UI Utilities / Lazy Load)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (UI Utilities / Lazy Load)
awesome-vue. - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (UI Utilities / Lazy Load)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (UI Utilities / Lazy Load)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (UI Utilities / Lazy Load)
awesome-vue - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (Components & Libraries / UI Utilities)
awesome-vuejs - vue-lazy-images - A plugin of lazyload images for Vue 2.x. (UI Utilities / Lazy Load)

README

        # vue-lazyload-images

[![npm](https://img.shields.io/badge/npm-v1.4.6-green.svg)](https://www.npmjs.com/package/vue-lazy-images)

[![Build Status](https://travis-ci.org/yyh1102/vue-lazyload-images.svg?branch=master)](https://travis-ci.org/yyh1102/vue-lazyload-images)

[![Coverage Status](https://coveralls.io/repos/github/yyh1102/vue-lazyload-images/badge.svg)](https://coveralls.io/github/yyh1102/vue-lazyload-images)

[![npm](https://img.shields.io/npm/l/express.svg)](https://opensource.org/licenses/mit-license.php)

A plugin of lazy-load images for Vue2.x

Support images lazyload in window or build-in element.

## Demo

![Demo](https://github.com/yyh1102/vue-lazylaod-images/blob/master/demo.gif)

## Installation

### npm

```

$ npm install vue-lazy-images

```

or 

### script

```html

```

## Usage

Entry.js

```javascript

import Vue from "vue"

import VueLazyImage from "vue-lazy-images";

Vue.use(VueLazyImage)

```

Template

```html

```

## Options

```Vue.use(VueLazyImage,options)```

| key | description | default | type |

|:----|:------------|:--------|:-----|

| offset | offset distance for pre-loading | 0 | Number |

| events | events that you want parentNode listen for | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Array |

| throttle | spacing interval of continuous calling | 0(ms) | Number | 

| debounce | idle time between two actions | 0(ms) | Number |