vue2使用图片懒加载之vue-lazyload

1. 为什么要进行图片懒加载呢？

使用图片懒加载的主要原因是为了优化网站或应用程序的性能和用户体验。当页面中存在大量图片时，如果一次性全部加载会影响页面的加载速度，用户可能需要等待很长时间才能看到完整的页面内容，这会影响用户的体验和满意度。

2. 如何实现图片懒加载

使用https://www.npmjs.com/package/vue-lazyload官网的vue-lazyload来实现图片懒加载

npm install vue-lazyload@^1.2.6 --save vue2安装

3. 在main.js里面引入使用

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// 配置项
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

4. 在页面中使用

把 <img :src="imageSrc" alt="Lazy Load Image"> 的src改为v-lazy即可实现图片懒加载

<template>
  <div>
    <img v-lazy="imageSrc" alt="Lazy Load Image">
  </div>
</template>

5. 其他的配置项可以去官网查看详细信息
https://www.npmjs.com/package/vue-lazyload