vue 图片lazyload

Posted 2021-01-20 djjlovedjj

今天看到我一醉哥的一篇朋友圈分享：《不如我们从头来过 | 掘金》

看完之后，百感交集，互联网的浪潮使创业公司如雨后春笋般崛起，

每一个初创公司都会有一群怀着美好愿景的小伙伴，

但是当寒冬来临时，也不得不去面对这残酷的现实，愿每一个被离职的各位大佬发展的越来越好。

 

然后我随便点开了掘金站长：阴明大佬的主页，看到了提升掘金首页打开速度，

进去看到了一个图片懒加载的方法（哎，之前的vue项目都没有用到懒加载，惭愧惭愧），很简单，实现如下：

npm i vue-lazyload -S

然后main.js

import Vue from ‘vue‘

import App from ‘./App.vue‘

import VueLazyload from ‘vue-lazyload‘

 

Vue.use(VueLazyload)

 

// or with options

Vue.use(VueLazyload, {

  preLoad: 1.3,

  error: ‘这里填图片错误时的替代图片‘,

  loading: ‘这里填图片加载时的替代图片‘,

  attempt: 1

})

 

new Vue({

  el: ‘body‘,

  components: {

    App

  }

})

然后在img标签中的src 换成 v-lazy 即可使用

<img v-lazy="你的图片路径" >

更多详细文档请看 https://www.npmjs.com/package/vue-lazyload