LazyLoad图片懒加载

最新推荐文章于 2023-10-13 11:52:22 发布

冒烟筒

最新推荐文章于 2023-10-13 11:52:22 发布

阅读量280

点赞数

分类专栏： Vue.js 文章标签： vue-lazyload

本文链接：https://blog.csdn.net/Smokestack/article/details/81539989

版权

Vue.js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

npm install vue-lazyload -s

在main.js 引入

import VueLazyLoad from 'vue-lazyload';
Vue.use(VueScroller， {
  error:'./static/error.png',
  loading:'./static/loading.png', // 其他属性定义方式雷同
});//定义自己想要的

组件中使用

<img class="img-lazy" v-lazy="url">//url是图片地址

API参数选项说明API

参数	描述	默认值	数据类型
`preLoad`	预加载高度比例	`1.3`	`Number`
`error`	当加载图片失败的时候	`'data-src'`	`String`
`loading`	当加载图片成功的时候	`'data-src'`	`String`
`attempt`	尝试计数	`3`	`Number`
`listenEvents`	想要监听的事件	`['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']`	Desired Listen Events
`adapter`	动态修改元素属性	`{ }`	Element Adapter
`filter`	图片监听或过滤器	`{ }`	Image listener filter
`lazyComponent`	lazyload component	`false`	Lazy Component
`dispatchEvent`	触发dom事件	`false`	`Boolean`
`throttleWait`	throttle wait	`200`	`Number`
`observer`	use IntersectionObserver	`false`	`Boolean`
`observerOptions`	IntersectionObserver options	{ rootMargin: '0px', threshold: 0.1 }	IntersectionObserver