当我们项目使用到大量的图片时候,为了解决不必要的资源浪费,一般会选择一个懒加载。下面就说一下vue-lazyload插件的使用
第一步。下载 npm install vue-lazyload
第二步。在main.js中启用此插件
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload,{
loading:'../static/img/load.png'
});
第三步。在实例中使用
<img v-lazy="item.imgurl" >
其中 用v-lazy 代替:src 这样 懒加载就完成了。
下面介绍一下文档
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']可以省略, 当插件跟页面中的动画或过渡等事件有冲突是, 可以尝试其他选项 | ['scroll'(默认),
'wheel',
'mousewheel',
'resize',
'animationend',
'transitionend',
'touchmove']
| 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 |
| |
| |
| |