VUE懒加载—vue-lazyload

2020-05-23  本文已影响0人  小北呀_

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>

上一篇 下一篇

猜你喜欢

热点阅读