图片懒加载的使用

2019-08-31 12:01:10 阅读：257 来源： 互联网

标签：插件 vue loading static lazyload 使用加载图片

一、vue lazyload插件：

　　　　插件地址：https://github.com/hilongjw/vue-lazyload

　　　　demo：http://hilongjw.github.io/vue-lazyload/

二、简单使用实例：

1. 安装插件：

npm install vue-lazyload --save-dev

2. main.js引入插件：

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

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

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

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

<div v-lazy:background-image="imgLink"></div>

标签：插件,vue,loading,static,lazyload,使用,加载,图片
来源： https://www.cnblogs.com/zhouyingying/p/11438494.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

图片懒加载的使用