Vue项目中实现图片懒加载

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

实现方法(使用vue的vue-lazyload插件)

1.安装插件

npm install vue-lazyload --save-dev

2.在入口文件main.js中引入并使用

import lazyLoad from 'vue-lazyload'

直接使用

Vue.use(lazyLoad)

或者添加自定义选项

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'src/error.png',
loading: 'src/loading.gif',
attempt: 1
})

3.修改图片显示方式为懒加载 (直接将 图片的 :src属性改为 v-lazy)

<img v-lazy="item.avatar" alt="">

效果 例如以下

当页面第一次加载所有图片并未全部加载，而是随着页面的滚动而加载

参数选项说明

• 点赞 1
• 收藏
• 分享
• 文章举报