vue图片懒加载

懒加载就是延迟加载
在没进入可视区域 的时候,我们先不给这个标签赋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"/>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。