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