插件vue-lazy-load-img
一、安装
npm install --save-dev lazy-load-img vue-lazy-load-img
二、用法
import Vue from 'vue'
import VueLazyLoadImg from 'vue-lazy-load-img'
Vue.use(VueLazyLoadImg)
<vue-lazy-load-img
mode="diy"
:time="300"
:done="true"
:position="{ top: 0, right: 0, bottom: 0, left: 0 }"
:diy="{ backgroundSize: 'cover', backgroundRepeat: 'no-repeat', backgroundPosition: 'center center' }"
@before="before"
@success="success"
@error="error">
<img src="./images/default.png" data-src="./images/test.png" alt="">
</vue-lazy-load-img>
插件vue-lazyload
一、安装
npm i vue-lazyload -D
二、用法
main.js 在入口文件
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload' //引入这个懒加载插件
Vue.use(VueLazyload)
// 或者添加VueLazyload 选项
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
new Vue({
el: 'body',
components: {
App
}
})
| key | description | default | default |
|---|---|---|---|
| preLoad | proportion of pre-loading height | 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 |
参数选项说明
| key | description | default | default |
|---|---|---|---|
| preLoad | proportion of pre-loading height | 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 |
