1、项目中有页面图片较多,可以使用图片懒加载 优化性能,提高用户体验,当图片到达视图区域再加载;
解决步骤:
第一:下载第三方插件 cnpm i vue-lazyload --save-dev
第二:再main.js里面引入import VueLazyload from ‘vue-lazyload’
第三:Vue.use(VueLazyload)使用
或者自定义:
Vue.use(VueLazyload, {
preLoad: 1.3,
error: ‘dist/error.png’,
loading: ‘dist/loading.gif’,
attempt: 1
})
具体代码:
<template>
<div class="hello">
<img v-lazy=imgurl alt="" />
</div>
</template>
<script>
import Clipboard from 'clipboard';
export default {
name: 'HelloWorld',
data () {
return {
imgurl:require("../../build/logo.png"),//图片路径
}
},
}
</script>
<style scoped>
img{
width:100px;
height:100px;
background: red;
}
input{
border:0;
outline: none;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>