vue图片懒加载:vue-lazyload

Vue懒加载图片实现步骤:

图片懒加载:属于前端性能优化的一种,目的似乎提高加载速度,提升用户体验,减少带宽

1、安装插件:

npm i vue-lazyload -S

2、在main.js中引入、挂载:

import VueLazyload from 'vue-lazyload';

Vue(VueLazyload,{
   error: require("图片路径"),
   loading: require("图片路径")
})

3、在渲染结构的页面中把:src换成v-lazy即可

例如:
<img v-lazy="item.productMainImage" alt=""> // 变量不用加''
<a href="/#/product/30"><img v-lazy="'/imgs/banner-1.png'"></a> // src后要加''
原文地址:https://www.cnblogs.com/wufenfen/p/13883261.html