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

最新推荐文章于 2024-11-21 15:10:14 发布

miaomiaowins

最新推荐文章于 2024-11-21 15:10:14 发布

阅读量1.4k

点赞数 32

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/miaomiaowins/article/details/141026216

版权

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

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

图片对比：

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

实现下列效果：

在这里插入图片描述

一、安装progressive-image

npm install progressive-image --save

yarn 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 = false

import 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"),
	      },
      ]