Vue懒加载神器！省电又飞快，网页速度翻倍

朋友们，给你们介绍个厉害的窍门——用 Vue 实现懒加载。以后看视频广告就不卡，手机网速飞起，省电又快

你懂啥叫懒加载不？就是说提前把图片预存好，用到时再下载。好处在哪儿？速度快呗，浏览网页快如闪电，还能省点网速，网上冲浪更顺畅。快试试看！

告诉你个秘密，用Vue + Element-UI可以搞定好多事情！首先得先装好Vue，其实很容易的，照着Vue CLI的提示一步步来，就能轻松搭建出新项目了。要是还有点蒙圈怎么办？别急，赶紧上Vue官方网站帮你解解惑吧～

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

来来，咱们得装个Element-UI了。这货就是个超好用的vue桌面端组件库，用它做出来的网页简直美翻天、速度也杠杠的。想知道怎么装吗？自己摸索呗！

装个超棒的插件，名字是vue-lazyload！这个神器能帮我们在不用的时候暂时不加载大图，省流量~怎么用，上网搜搜看吧～

Vue.use(VueLazyload, {
  loading: require('路径/加载中图片.png'),
  error: require('路径/加载失败图片.png')
})

搞定！我们只需在主要文件main.js里添加个参数就能让图片“偷懒”～至于具体操作，建议去网上找点靠谱的教程看看~

下面我们就来讲讲怎样使用vue-lazyload这个神奇的功能。首先，我们看看图片加载的时候会出现的loading动画和加载失败时的error页面对不对？这样下次碰到这种情况也不怕了！

搞定了！大干特干！现在进入关键部分！用Vue组件实现图片懒加载，简直太容易了！只要在模板里运用v-lazy指令标记你想加载的图片，再填写 URL 就行。别忘了在 Vue 的 data 部分搞个 imageSrc 变量，把地址记住。这么操作，没人看网页时，图片是不会加载的，直到有人点击它。正在加载时，还会出现一张临时图片替代原图，万一加载失败，也会告诉你原因。这个功能厉害？今儿就说说如何用Vue和Element-UI实现图片懒加载。希望对你有帮助！有问题或建议尽管说！别忘了点赞分享

export default {
  data() {
    return {
      imageSrc: '要懒加载的图片链接'
    }
  }
}