建站
咨询
售后
建站咨询
vue实现图片懒加载的方法分析
本文实例讲述了vue实现图片懒加载的方法。分享给大家供大家参考，具体如下：
创新互联是一家专注于网站设计制作、成都网站设计与策划设计,西秀网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:西秀等地区。西秀做网站价格咨询:18982081108
vue图片懒加载使用
首先第一步，安装插件
vue-lazyload
npm install vue-lazyload --save-dev
在man.js中引入插件
import VueLazyLoad from 'vue-lazyload'
使用
Vue.use(VueLazyLoad,{
error:'', //加载失败的图
loading:'' //加载中的默认图
})
这是一个最简单的配置
官方的详细扩展配置文档
| key | description | default | options |
|---|---|---|---|
preLoad | proportion of pre-loading height（预加载高度比例） | 1.3 | Number |
error | src of the image upon load fail（图片路径错误时加载图片） | 'data-src' | String |
loading | src of the image while loading（预加载图片） | 'data-src' | String |
attempt | attempts count（尝试加载图片数量） | 3 | Number |
listenEvents |
events that you want vue listen for （想要监听的vue事件） 默认['scroll']可以省略， 当插件跟页面中的动画或过渡等事件有冲突是， 可以尝试其他选项 |
| Desired Listen Events |
adapter |
dynamically modify the attribute of element （动态修改元素属性） | { } | Element Adapter |
filter | the image's listener filter（动态修改图片地址路径） | { } | Image listener filter |
lazyComponent | lazyload component | false | Lazy Component |
dispatchEvent | trigger the dom event | false | Boolean |
throttleWait | throttle wait | 200 | Number |
observer | use IntersectionObserver | false | Boolean |
observerOptions | IntersectionObserver options | { rootMargin: '0px', threshold: 0.1 } | IntersectionObserver |
实现懒加载，使用v-lazy代替src属性
对图片单独进行配置
方法1
方法2
将v-lazy='obj' 赋值一个对象
在data里面声明对象
可以设置三个属性 src 图片 loading加载状态下的图片 error错误状态下的图片
希望本文所述对大家vue.js程序设计有所帮助。
分享文章：vue实现图片懒加载的方法分析
文章位置：http://lswzjz.com/article/iecepo.html
