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

图片是网站优化的一个重点，图片懒加载是其中比较好用的一个方法。当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片，不至于堆叠在一块，或显示大片空白，让用户体验更好一点。

npm

$ npm i vue-lazyload -D

插件地址

地址1 地址2

案例

案例链接

用法

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

功能扩展

图片懒加载的简单效果已经实现了，然后就可以按这开发文档的api进行扩展了：

使用总结

img标签中使用懒加载：v-lazy 代替 v-bind:src ；

背景图片中使用懒加载：v-lazy:background-image = ""  ==>> 注意图片和盒子大小问题，否则显示可能有问题哦。

使用时最好给一个 key 属性，即：     

<img v-lazy="图片地址" :key="图片地址">

参考博客

博客1 博客2