# vue-imgs-preload

> ![images](https://img.shields.io/badge/vue-2.6.10-brightgreen) ![images](https://img.shields.io/badge/vue--cli-3.x-lightgrey)

Latest version **0.1.3** (published 2019-09-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-imgs-preload
pnpm add vue-imgs-preload
yarn add vue-imgs-preload
bun add vue-imgs-preload
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2019-09-25 |
| First published | 2019-08-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 95.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | lvjiaxuan |
| Maintainers | lvjiaxuan |
| Keywords | preload, vue, images |

## Links

- npm: https://www.npmjs.com/package/vue-imgs-preload
- Repository: https://github.com/lvjiaxuan/vue-imgs-preload
- Homepage: https://github.com/lvjiaxuan/vue-imgs-preload#readme
- Issues: https://github.com/lvjiaxuan/vue-imgs-preload/issues
- npm.io page: https://npm.io/package/vue-imgs-preload

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^2.6.9

## 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.3 (latest) — 2019-09-25
- 0.1.2 — 2019-08-21
- 0.1.1 — 2019-08-20
- 0.1.0 — 2019-08-20

## README

# vue-imgs-preload

![images](https://img.shields.io/badge/vue-2.6.10-brightgreen)
![images](https://img.shields.io/badge/vue--cli-3.x-lightgrey)

> 一个简单的图片预加载组件，提供简单的百分比预加载页面

## Install

```
npm i vue-imgs-preload
```

## Options

**props：**

|     Property     |                description                |  type   | default |
| :--------------: | :---------------------------------------: | :-----: | :-----: |
|       imgs       |           需要预加载的图片数组            |  Array  |    /    |
|  preloadVisible  | 预加载页面的显示隐藏，一般配合`.sync`使用 | Boolean |    /    |
| addConditionsNum |         对预加载有影响的因素个数          | Number  |    0    |

**Events：**

|    method     |        description         |
| :-----------: | :------------------------: |
| imgsLoadedAll | 所有图片预加载成功后的事件 |

## Usage

*imgsPercentage到100后的默认事件是`preloadVisible = false`*

**App.vue：**

```vue
<template>
  <main id="app">

    <imgs-preload ref="imgs-preload" class="imgs-preload-wrap" :imgs="imgs" :preload-visible.sync="preloadVisible" :add-conditions-num="addConditionsNum" @imgsLoadedAll="imgsLoadedAll">
      <template #default="{ imgsPercentage }">{{ imgsPercentage }}%</template>
    </imgs-preload>

    <template v-if="!preloadVisible">
      loaded!
    </template>
  </main>
</template>

<script>
import imgs from '@/assets/imgs.json'// 可以把所有图片名称遍历到一个json文件
import ImgsPreload from 'vue-imgs-preload'
  
export default {

  name: 'App',

  components: {
    ImgsPreload
  },

  data() {
    return {
      preloadVisible: true,
      addConditionsNum: 1,// 影响预加载的因素个数，比如有一个异步接口
    }
  },

  computed: {
    imgs() {
      return imgs.map(item => require('@/assets/images/' + item));
    }
  },
  
  created() {
    this.init();
  },
  
  methods: {
    
    init() {
      setTimeout(() => {
        // this.addConditionsNum-- or this.$refs['imgs-preload'].imgsLoaded++
      }, 1000);
    },
    
    imgsLoadedAll() {
      // do sth...
    }
  }
}
</script>

<style>
#app { min-height: 100vh; }
.imgs-preload-wrap {
  background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
  color: #fff;
  font-size: .35rem;
}
</style>
```

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