图片懒加载【2】: vue-lazyload 图片懒加载

1、安装插件:

npm install vue-lazyload --save-dev

2、main.js引入插件:

 import VueLazyLoad from 'vue-lazyload'
 Vue.use(VueLazyLoad,{
     preLoad: 1.3,
     error:'./static/error.png',
     loading:'./static/loading.png',
     attempt: 1
 })

3、vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

<img class="item-pic" v-lazy="newItem.picUrl"/>

4、vue文件中需要懒加载的背景图片,v-lazy:background-image="imgUrl"

<div v-lazy:background-image="imgLink"></div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
禁止转载,如需转载请通过简信或评论联系作者。