# vue-tiny-lazyload-img

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

Latest version **0.1.0** (published 2019-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-tiny-lazyload-img
pnpm add vue-tiny-lazyload-img
yarn add vue-tiny-lazyload-img
bun add vue-tiny-lazyload-img
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2019-02-13 |
| First published | 2018-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 19 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 91 |
| Author | Irfan Maulana |
| Maintainers | irfan.maulana |
| Keywords | vue 2 lazy load, vue lazy load, vue lazyload, vue lazyload image |

## Links

- npm: https://www.npmjs.com/package/vue-tiny-lazyload-img
- Repository: https://github.com/mazipan/vue-tiny-lazyload-img
- Homepage: https://github.com/mazipan/vue-tiny-lazyload-img#readme
- Issues: https://github.com/mazipan/vue-tiny-lazyload-img/issues
- npm.io page: https://npm.io/package/vue-tiny-lazyload-img

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.6
- [vue-google-adsense](https://npm.io/package/vue-google-adsense.md) ^1.3.0
- [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.5.1

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2019-02-13
- 0.0.3 — 2018-04-19
- 0.0.2 — 2018-04-16
- 0.0.1 — 2018-04-10

## README

# 🐌 vue-tiny-lazyload-img

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

[![License](https://img.shields.io/github/license/mazipan/vue-tiny-lazyload-img.svg?longCache=true)](https://github.com/mazipan/vue-tiny-lazyload-img) [![version](https://img.shields.io/npm/v/vue-tiny-lazyload-img.svg?maxAge=3600)](https://www.npmjs.com/package/vue-tiny-lazyload-img)
[![downloads](https://img.shields.io/npm/dt/vue-tiny-lazyload-img.svg?maxAge=86400)](https://www.npmjs.com/package/vue-tiny-lazyload-img) ![minified](https://badgen.net/bundlephobia/minzip/vue-tiny-lazyload-img)

## Demo Page

https://mazipan.github.io/vue-tiny-lazyload-img/

## Usage

### Download

```js
npm install vue-tiny-lazyload-img
// OR
yarn add intersection-observer
```

### Install Plugin

```js
import VueTinyLazyloadImg from 'vue-tiny-lazyload-img'
Vue.use(VueTinyLazyloadImg);
```

### HTML Snippet

```html
<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

```js
$ yarn add intersection-observer

// then add polyfill for IntersectionObserver in your main app
require('intersection-observer')
```

## Build Setup

``` bash
# 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

---
_Source: https://npm.io/package/vue-tiny-lazyload-img · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._