一、vue lazyload插件：

插件地址：https://github.com/hilongjw/vue-lazyload
demo：http://hilongjw.github.io/vue-lazyload/

1.安装插件

  1. npm install vue-lazyload -D

2.在main.js中引入并实例化配置

  1. //实例化
  2. Vue.use(VueLazyLoad,{
  3.   error:'./static/error.png',//获取错误时显示的图片
  4.   loading:require('@/assets/loading.gif') //图片加载中显示的图片
  5. })
  7. //or
  9. import Vue from 'vue'
  10. import VueLazyload from 'vue-lazyload'
  11. Vue.use(VueLazyload, {
  12.   loading: require('@/assets/img/kyy_img_white.png'),
  13.   preLoad: 1.5,
  14.   error: require('@/assets/img/kyy_img_white.png'),
  15.   attempt: 1,
  16.   filter: {
  17.     prefixUrl (listener, options) {
  18.       console.log(listener)
  19.     }
  20.   }
  21.   // listenEvents: [ 'scroll' ]
  22. })

如果不需要配置的话忽略上面代码,直接实例化

  1. Vue.use(VueLazyLoad))
key description default options
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

3.img的src改为v-lazy

  1. <img v-lazy="imgSrc">

4.设置样式

  • tips:加载时可以不设置图片,使用背景颜色代替
  1. //加载中的样式
  2.   img[lazy=loading] {
  3.   }
  4. //加载错误时的样式
  5.   img[lazy=error] {
  6.   }
  7. //加载后的样式
  8.   img[lazy=loaded] {
  9.   }
  • 例子
  1. img[lazy=loading]{
  2.   transform:scaleX(0.3) scaleY(0.5);
  3. }
  4. img[lazy=loaded]{
  5.   animation:appear 0.3s;
  6.   animation-fill-mode: both;
  7. }
  8. @keyframes appear {
  9.   from{
  10.     opacity:0;
  11.   }
  12.   to{
  13.     opacity:1;
  14.   }
  15. }

二、在Vue-lazyload不生效的替补方案

手写插件

  1. Vue.directive('imgdef', {
  2.   // 当元素被插入到DOM中时...
  3.   inserted () {},
  4.   // 绑定，只调用1次
  5.   bind (el, binding) {
  6.     el.onerror = function () {
  7.       el.src = require('@/assets/img/home_img_yxpp.png')
  8.     }
  9.   },
  10.   update () {},
  11.   componentUpdated () {},
  12.   // 解绑时调用
  13.   unbind () {}
  14. })

使用方式：
v-imgdef