标签：sdn 总结 bottom -o col height temp dev chm
前言：图片是网站优化的一个重点，图片懒加载是其中比较好用的一个方法。jquery也有很多图片懒加载的插件，今天看了一下vue的图片懒加载插件 ---- vue-lazyload。
1. 安装：cnpm install vue-lazyload --save-dev（当然可以用npm或者yarn哦）
import VueLazyLoad from ‘vue-lazyload‘ Vue.use(VueLazyLoad, { preLoad: 1, error: require(‘./assets/img/error.jpg‘), loading: require(‘./assets/img/homePage_top.jpg‘), attempt: 2, })
3. lazyloadDemo.vue（页面中）使用：
<template>
<div id="lazyload">
<!-- img中使用图片懒加载。 v-lazy代替v-bind:src -->
<ul class="img">
<li v-for="(item,index) in imgList">
<img v-lazy="item" alt="" style="width: 768px;">
</li>
</ul>
<!-- 背景图中使用图片懒加载。 v-lazy:background-image = "" -->
<ul class="bgImg">
<li v-for="(item,index) in imgList" v-lazy:background-image="item"></li>
</ul>
</div>
</template>
<script>
export default {
name:‘LazyLoadDemo‘,
data(){
return{
imgList:[
require(‘../assets/img/1.jpg‘),
require(‘../assets/img/2.jpg‘),
require(‘../assets/img/3.jpg‘),
require(‘../assets/img/4.jpg‘),
require(‘../assets/img/5.jpg‘),
require(‘../assets/img/6.jpg‘),
require(‘../assets/img/7.jpg‘),
require(‘../assets/img/8.jpg‘),
require(‘../assets/img/9.jpg‘),
require(‘../assets/img/10.jpg‘),
require(‘../assets/img/11.jpg‘),
require(‘../assets/img/12.jpg‘),
require(‘../assets/img/13.jpg‘),
require(‘../assets/img/14.jpg‘),
require(‘../assets/img/15.jpg‘),
require(‘../assets/img/16.jpg‘),
require(‘../assets/img/17.jpg‘),
require(‘../assets/img/18.jpg‘),
require(‘../assets/img/19.jpg‘),
require(‘../assets/img/20.jpg‘),
],
}
}
}
</script>
<style lang="scss" scoped>
#lazyload{
width: 768px;
background-color: #fcc;
margin: 0 auto;
.img{
width: 768px;
background-color: #fcc;
}
.bgImg{
li{
width: 768px;
height: 522px;
margin-bottom: 10px;
background-repeat: no-repeat; //注意图片大小哦，否则可以显示不全
background-size: cover;
}
}
}
</style>
使用总结：
img标签中使用懒加载：v-lazy 代替 v-bind:src ；
背景图片中使用懒加载：v-lazy:background-image = "" ==>> 注意图片和盒子大小问题，否则显示可能有问题哦。
使用时最好给一个 key 属性，即：
<img v-lazy="图片地址" :key="图片地址">
:key="" 必须要加，否则就会出现，页面刷新，其他内容都刷新了，但是只有图片不刷新的情况 。因为key可能相同，所以页面不会更新！！！
官网解释：
原博客地址：https://blog.csdn.net/halo1416/article/details/81302419
标签：sdn 总结 bottom -o col height temp dev chm
原文地址：https://www.cnblogs.com/zyx-blog/p/14675741.html
