vue中实现图片懒加载之vue-lazyload

前言

通常在一些大型网站中可以看到图片都是根据你的可视窗口去慢加载，这一般都是当你滚动到这张图片时才会加载出来给你显示。这样做的好处大家应该都知道，如果比如是一个图片网站，直接一次性给你加载全部图片，在数据量大的情况下，就会导致这个网站速度很慢，说不定也会导致你的浏览器崩溃哦。所以这些网站都会用到懒加载。然后在vue中我们可以使用vue-lazyload插件来实现此功能

安装

使用以下命令安装插件

npm i vue-lazyload@1.2.3 -S

这里使用低版本的，最新版本我使用后发现没效果。

main.js全局引入

import VueLazyLoad from 'vue-lazyload'
// 2.注册插件
Vue.use(VueLazyLoad, {
  preLoad: 1,
  // 懒加载默认加载图片
  loading: 'http://img.shiyit.com/img-loading.png',
  // 加载失败后加载的图片
  error: 'http://img.shiyit.com/img-loading-error.png',
  attempt: 1
  // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
  // listenEvents: [ 'scroll' ]
})

img标签使用

<img  v-lazy="url" :key="url">

这里的url为你的图片地址URL

测试

至此懒加载效果就已经实现了，效果如下图：