Vue - progressive-image 渐进式图片加载（Vue2）

在追求高分辨率图片的网页中，其图片加载速度影响着用户的体验，特别在低网速加载慢的情况下，简单的图片加载图标无法满足用户需求，progressive-image实现了渐进式图片加载，旨在提升网页图片的加载性能和用户体验。

图片对比：

图片	质量	分辨率	大小
	低	20 x 10	0.4KB
	高	1200 x 600	311KB

实现下列效果：

在这里插入图片描述

一、安装progressive-image

npm install progressive-image --saveyarn add progressive-image

二、如何使用

1.在index.html中添加css样式：

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"># 添加progressive的css样式，可以下载progressive.css到本地存储并引用css文件<link href="https://unpkg.com/progressive-image@1.2.0/dist/index.css" rel="stylesheet" type="text/css"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><div id="app"></div></body>
</html>

2.在main.js中导入并引用：

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falseimport progressive from 'progressive-image/dist/vue'
Vue.use(progressive, {removePreview: true,scale: true
})new Vue({render: h => h(App),
}).$mount('#app')

3.在组件内使用：

<template><div class="main"><div class="progressive"><img class="preview" v-progressive="item.preview" :src="item.src" /></div></div>
</template><script>
export default {data() {return {image: {src: require("../src/assets/r1.jpg"), # 缩略图preview: require("../src/assets/1.jpg"), # 完整图片},};},
};
</script><style scoped>
.main {width: 100%;height:800px;
}
</style>

其中progressive和preview的class类名是固定格式，可在外部包裹一层元素标签来控制图片高度；

注意事项

在对于多次绑定本地同一张图片时，只会加载显示第一次，需修改不同图片名才行！

 list:[{src: require("../src/assets/r1.jpg"),preview: require("../src/assets/1.jpg"),},{src: require("../src/assets/r1.jpg"),preview: require("../src/assets/1.jpg"),},{src: require("../src/assets/r1.jpg"),preview: require("../src/assets/1.jpg"),},{src: require("../src/assets/r1.jpg"),preview: require("../src/assets/1.jpg"),},{src: require("../src/assets/r1.jpg"),preview: require("../src/assets/1.jpg"),},]