vue-lazyload 图片懒加载的原理与使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、图片懒加载vue-lazyload是什么？

背景：

图片是非常占用页面渲染时间的，尤其是一些图片比较多的页面，过多的图片可能会造成页面的卡顿，降低流畅度影响用户体验，我们在实际开发中，对于处于视口外的图片，在用户没有滚动到位置的时候没必要渲染，此时我们就需要用到懒加载，让图片延后渲染。
vue中有一个插件vue-lazyload，它提供了一个“vue指令”可以完成上面需求

原理：

一、获取视口底部位置，在移动端可以使用 clientHeight 来获取到视口底部的像素值，pc端可以使用getBoundingClientRect() 获取

二、收集所有img标签转成数组并保存，当然实际开发中，我们对获取方式还要加一些其他条件，避免有些不需要懒加载的图片也被收集进来，这里我就简单点了。

三、写个渲染函数用来处理图片的渲染逻辑，主要逻辑是判断当前dom节点是否在视口内

二、使用步骤

1.安装vue-lazyload插件

代码如下（示例）：

//npm 
npm install vue-lazyload --save-dev

//yarn
yarn add vue-lazyload

//如果你是用Vue2.0,请不要用最新的版本，可以指定支持Vue2.0的版本
//例如：
yarn add vue-lazyload@1.3.3

2.main.js中进行引用

代码如下（示例）：

import VueLazyload from "vue-lazyload";
 
Vue.use(VueLazyload);

//建议自定义配置插件，设置相应的loading图和图片错误显示的统一图片
Vue.use(VueLazyload, {
preLoad: 1.3,
error: require('../src/assets/lazy/error.png'),
loading: require('../src/assets/lazy/loading.gif'),
attempt: 1
})

我自己有常用的loading图库，除了svg还有纯css写的loading图，喜欢的可以点击链接去下载

3.使用方法

代码如下（示例分单图和多图的使用方式）：

//单图
<img v-lazy="psdimg"/>

//多图
<div v-lazy-container="{ selector: 'img' }">
  <img data-src="https://domo.com/1.png">
  <img data-src="//https://domo.com/2.png">
  <img data-src="//https://domo.com/3.png">
  <img data-src="//https://domo.com/...png">   
</div>

---

总结

以上就是今天要分享的内容，图片懒加载在实际项目中还是很实用的嘞，先记个笔记。