vue图片懒加载vue-lazyload的使用

安装

npm i vue-lazyload -D

1. main.js 在入口文件

import Vue from 'vue'
import App from './App.vue'
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,
})

2. 在入口文件添加后，在组件任何地方都可以直接使用把 img 里的:src -> v-lazy

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