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://myzitong.com/article/iecepo.html