1.安装插件:
npm install --save vue-lazyload
2.main.js引入插件
// 引入懒加载
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad)
3.img标签使用 v-lazy
<template>
<div>
<img v-lazy="pic1">
<img v-lazy="pic2">
........
<script>
import pic1 from '../static/2.jpg'
import pic2 from '../static/3.jpg'
export default {
data(){
return{
pic1:pic1,
pic2:pic2,
}
},
}
........
3.div标签背景使用
<div class="bg" v-lazy:background-image="pic1"></div>
<div class="bg" v-lazy:background-image="pic2"></div>
网友评论