https://github.com/lvjiaxuan/vue-imgs-preload

图片预加载vue组件
https://github.com/lvjiaxuan/vue-imgs-preload

preload-images vue

Last synced: about 1 month ago
JSON representation

图片预加载vue组件

• Host: GitHub
• URL: https://github.com/lvjiaxuan/vue-imgs-preload
• Owner: lvjiaxuan
• License: mit
• Created: 2019-08-20T03:24:57.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-01T10:25:14.000Z (about 2 years ago)
• Last Synced: 2024-08-31T18:45:45.759Z (4 months ago)
• Topics: preload-images, vue
• Language: JavaScript
• Homepage:
• Size: 2.18 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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

  

    

      {{ imgsPercentage }}%

    

    

      loaded!

    

  

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...

    }

  }

}

#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;

}

```