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

背景

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

文章目录

• 背景
• 一、使用步骤

• 1.安装vue-lazyload插件
• 2.main.js中进行引用
• 3.使用方法

一、使用步骤

1.安装vue-lazyload插件

npm install vue-lazyload --save-dev

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
})

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>