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

前言：图片是网站优化的一个重点，图片懒加载是其中比较好用的一个方法。jquery也有很多图片懒加载的插件，今天看了一下vue的图片懒加载插件 ---- vue-lazyload。

1. 安装：cnpm install vue-lazyload --save-dev（当然可以用npm或者yarn哦）

2. main.js  中全局引入：

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（页面中）使用：

使用总结：

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

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

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

        :key=""  必须要加，否则就会出现，页面刷新，其他内容都刷新了，但是只有图片不刷新的情况 。因为key可能相同，所以页面不会更新！！！ 

官网解释：

 

最后：

插件地址：vue-lazyload

参考博客：https://www.cnblogs.com/xyyt/p/7650539.html

                  https://blog.csdn.net/bboyjoe/article/details/72677677

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

对博客文章的参考，若原文章博主介意，请联系删除！请原谅