# vue-simple-lazyload

> A simple lazyload plugin for vue or nuxt

Latest version **1.1.3** (published 2020-03-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-simple-lazyload
pnpm add vue-simple-lazyload
yarn add vue-simple-lazyload
bun add vue-simple-lazyload
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2020-03-27 |
| First published | 2020-03-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | 陈耀耀 |
| Maintainers | yasinchan |

## Links

- npm: https://www.npmjs.com/package/vue-simple-lazyload
- Repository: https://github.com/YasinChan/vue-simple-lazyload
- npm.io page: https://npm.io/package/vue-simple-lazyload

## Recent versions

- 1.1.3 (latest) — 2020-03-27
- 1.1.2 — 2020-03-27
- 1.1.1 — 2020-03-17
- 1.1.0 — 2020-03-16
- 1.0.9 — 2020-03-15
- 1.0.8 — 2020-03-14
- 1.0.7 — 2020-03-14
- 1.0.6 — 2020-03-14
- 1.0.5 — 2020-03-11
- 1.0.4 — 2020-03-11
- 1.0.3 — 2020-03-11
- 1.0.2 — 2020-03-11
- 1.0.1 — 2020-03-11
- 1.0.0 — 2020-03-11

## README

# vue-simple-lazyload

> A pure lazyload plugin for vue or nuxt

## Support
> `<img src="" />` && `background-image: url();`

## Link
**[demo](https://git.yasinchan.com/vue-simple-lazyload/dist/)**
**[npm](https://www.npmjs.com/package/vue-simple-lazyload)**

## Usage

```
$ yarn add vue-simple-lazyload -S
// or
$ npm i vue-simple-lazyload -S
```

> options [Intersection_Observer_API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

> eg. `rootMargin: '50px'` can preload img before 50px

### Vue

#### Component

1. main.js

   ```js
   import Vue from 'vue'
   import { VueImgLazy } from 'vue-simple-lazyload'
   
   Vue.use(VueImgLazy, {
     rootMargin: '50px'
   })
   ```
2. template

   ```html
   <ImgLazy :imgUrl="" :bgColor="" :lazyloadContainer="" :lazyloadImg="" :placeholderFigure=""></ImgLazy>
   ```
3. Props

    | Props             | Description       | Default                     | Opt/Required |
    | ----------------- | ----------------- | --------------------------- | ------------ |
    | imgUrl            | Image url         | ''                          | Required     |
    | bgColor           | Background color  | ''                          | Optional     |
    | lazyloadContainer | Container class   | '' // has default style     | Optional     |
    | lazyloadImg       | Image Class       | '' // has default style     | Optional     |
    | placeholderFigure | Placeholder image | A base64 transparent figure | Optional     |



#### Directive
##### v-lazy (for `<img src="" />`)
1. main.js
   ```js
   import Vue from 'vue'
   import { VueLazy } from 'vue-simple-lazyload'
   
   Vue.use(VueLazy, {
     rootMargin: '50px'
   })
   ```
2. template
   ```css
   <div v-lazy="$imgUrl"
       :style="{
         backgroundColor: $bgColor
       }"
       class="lazyload-container">
       <img :src="$placeholderFigure" class="lazyload-img" />
   </div>
   
   /*css. This is also the default style of the VueImgLazy component*/
   .lazyload-container {
     transition: background-color .5s ease-in-out .3s;
     width: 400px;
     height: 200px;
   }
   .lazyload-img  {
     transition: opacity .5s ease-in-out .3s;
     opacity: 0;
     width: 100%;
     height: 100%;
   }
   ```
##### v-lazy:bgimg (for `background-image: url();`)

1. main.js
   ```js
   import Vue from 'vue'
   import { VueLazy } from 'vue-simple-lazyload'
   
   Vue.use(VueLazy, {
     rootMargin: '50px'
   })
   ```
2. template
   ```css
   <div v-lazy:bgimg="$imgUrl"
       :style="{
         backgroundColor: $bgColor
       }"
       class="lazyload-container">
   </div>
   
   /*css. This is also the default style of the VueImgLazy component*/
   .lazyload-container {
     transition: background-color .5s ease-in-out .3s;
     width: 400px;
     height: 200px;
   }
   ```


-------

### nuxt

1. ~/plugins/lazyload.js

   ```js
   import Vue from 'vue'
   import { VueLazy, VueImgLazy } from 'vue-simple-lazyload'
   
   Vue.use(VueLazy, {
     rootMargin: '50px'
   })
   // or
   Vue.use(VueImgLazy, {
     rootMargin: '50px'
   })
   ```

2. nuxt.config.js

   ```js
   ...
    plugins: [
      { src: '~/plugins/lazyLoad', mode: 'client' }
    ],
   ...
   ```
 
## Required
> This project base on [Intersection_Observer_API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). Need import polyfill if necessary.
   

## TODO

1. Add nuxt modules

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