Vue lazyload懒加载使用

当我们项目使用到大量的图片时候，为了解决不必要的资源浪费，一般会选择一个懒加载。下面就说一下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