Vue-img-preload

vue-img-preload

预加载页面上的图片资源，提高用户体验

效果预览

使用方法

浏览器中

下载vue-img-preload插件
```
npm install vue-img-preload
```
在页面中引入dist目录下的preload.min.js文件（确保此时页面已经引入vue.js），如
```
<script src="path/dist/preload.min.js"></script>
```
首先创建一个空的Vue实例，用于页面中的事件监听。调用Vue.use方法装载Preload插件，并传入配置参数，eachLoaded在每张图片下载完成后都会执行该方法， allLoaded则在所有图片都下载完成后执行，此处分别触发一个eachload，allload事件，并传回部分内部处理参数，如已下载图片数量，图片下载完成后的event对象。
```
// 非父子组件通信
 var bus = new Vue()
 // 安装插件
 Vue.use(Preload, {
     eachLoaded: function(msg) {
         bus.$emit('eachload', msg)
     },
     allLoaded: function(msg) {
         bus.$emit('allload'，msg)
     }
 })
```
此时Vue对象中添加一个v-preload指令，可以在Vue管理的结构中使用，<div v-preload="imgs"></div>，并传入参数。 ``` // 页面结构

// 数据 var vm = new Vue({ el: ‘#app’, data: function() { return { isLoaded: false, imgs: [ ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_0923.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_3606.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_3657.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_3715.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_3775.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_3789.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_3791.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_3832.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_3833.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_3910.JPG?raw=true’ ] } } })

// 注册eachload，allload事件处理函数，当所有图片都下载完毕后，通过控制isLoaded的值，控制loading类，从而控制加载动画
bus.$on('eachload', function(msg) {
    console.log(msg.total)
})

bus.$on('allload', function(msg) {
    vm.isLoaded = true
}) ``` **注：可运行vue-img-preload/test/web/simple.html查看效果** 4. 上述方法中，在装载插件的时候统一配置eachLoaded，和allLoaded配置项，如果针对页面中多个部分分别进行配置，此时需要给v-preload传入一个Object参数，其中包含imgs和options属性，分别对应图片地址数组和特定配置项，如下: ``` infos: {
 imgs: ['https://github.com/DiligentYe/some-picture/blob/master/IMG_0923.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3606.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3657.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3715.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3775.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3789.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3791.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3832.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3833.JPG?raw=true', 'https://github.com/DiligentYe/some-picture/blob/master/IMG_3910.JPG?raw=true'],
 options: {
     allLoaded: function(msg) {
         bus.$emit('allload')
     }
 }  }

datas: { imgs: [‘https://github.com/DiligentYe/some-picture/blob/master/IMG_4030.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_4056.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_4967.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_4968.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_4969.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_4970.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_4971.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_4972.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_4973.JPG?raw=true’, ‘https://github.com/DiligentYe/some-picture/blob/master/IMG_4974.JPG?raw=true’], options: { type: ‘order ‘, eachLoaded: function(msg) { bus.$emit(‘eachload’, msg) }, allLoaded: function(msg) { bus.$emit(‘allload’) } } } ``` 针对infos，只会在所有图片下载完成的时候触发allload，而datas，则设置了图片有序下载，并且单张下载完毕和所有图片下载完毕都会执行相应的动作。 注：可运行vue-img-preload/test/web/index.html查看效果

组件中

大体用法与在页面中一致，具体用法可参考vue-img-preload/test/module/test.js写法，运行结果可运行npm run dev，启动一个服务器，访问对应地址即可。

配置参数

eachLoaded(function): 每次加载成功图片的行为，默认在控制台打印one picture has been loaded。
allLoaded(function): 所有图片加载成功的行为，默认在控制台打印all picture has been loaded。
type(string): 图片有序／无序加载，默认为’disorder‘，采用无序加载，如果type值不为’disorder‘，则采用有序加载。使用有序加载时，建议设置为‘order’。
max: 一次加载的照片个数，默认值为1000，当图片数量小于max时，加载所有图片；当图片的数量大于max时，采用分块加载，当前块加载完毕后才会加载下一块，每块的长度为max