懒加载就是延迟加载
在没进入可视区域 的时候,我们先不给这个标签赋src属性
,要不有可能加载太多比较慢的时候用户都跑了哈哈
我这里基于vue来实现懒加载
首先安装下插件:
npm install vue-lazyload --save
1
在 main.js 中使用:
引入
import VueLazyLoad from 'vue-lazyload'
1
Vue.use(VueLazyLoad,{
error:'/img.jpg', //报错时需要的图片
loading:'/img/jpg' //加载时需要的图片
})
图片替换:
vue文件中将需要懒加载的图片绑定 v-bind:src 换成 v-lazy
1
<img v-lazy="item.img"/>