前言

最近又用到了vue-lazyload来实现图片懒加载，怎么说又呢？是因为之前只是简单引用没有深入了解，都用过这么多次了，那就来个总结吧。

install

$ npm i vue-lazyload -S

Usage

简单使用
main.js

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

new Vue({
  el: 'body',
  components: {
    App
  }
})

template:

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >
  </li>
</ul>

复杂一点的main.js

Vue.use(VueLazyLoad, {
  preLoad: 1,
  lazyComponent: true,
  lazyImage: true,
  attempt: 1,
  // error: loadingImg,
  loading: loadingImg,
  adapter: {
    // 尝试加载正确图片失败后回调
    error: listener => {
      //  // 加载图片失败时,点击图片区域重新加载
      console.log('error: load img fail');
      const { el } = listener;
      delete el.src;
      el.alt = '加载失败，点击重试';
      // el.style.cssText = 'background-color: gray;';
      el.addEventListener('click', function reload() {
        listener.state.error = false;
        listener.load();
        el.removeEventListener('click', reload);
        /* 根据js事件冒泡机制，要实现点击图片重新加载而不触发到别的事
        件则需要阻止其冒泡，因为所有的onClick监听都是设置在冒泡阶段的
        */
        e.stopPropagation(); 
      }, true);
    },
  },
});

Options

silent: silent || true,
preLoad: preLoad || 1.3, // 0.3的距离是 当前dom距离页面底部的高度时就开始加载图片了
preLoadTop: preLoadTop || 0, // dom的底部距离页面顶部多少距离还是加载
error: error || DEFAULT_URL, // 加载失败显示的图片
loading: loading || DEFAULT_URL, // 加载中显示的图片
attempt: attempt || 3, // 图片加载失败，最多重试的次数
scale: scale || getDPR(scale),
ListenEvents: listenEvents || DEFAULT_EVENTS, // 给dom注册dom的事件，在这些事件回调中会触发加载图片的方法
hasbind: false,
supportWebp: supportWebp(),
filter: filter || {},
adapter: adapter || {} // 状态变化的回调监听，同时也可以使用lazyload的$on()函数(注意不是vue的)来监听状态变化的回调函数

CSS

那自然也会遇到想要写自己想要展示的样式，那我们就可以用到属性选择器。因为默认会生成三个状态分别是 loading loaded error

<img src="imgUrl" lazy="loading">
<img src="imgUrl" lazy="loaded">
<img src="imgUrl" lazy="error">

<style>
  img[lazy=loading] {
    /*your style here*/
  }
  img[lazy=error] {
    /*your style here*/
  }
  img[lazy=loaded] {
    /*your style here*/
  }
  /*
  or background-image
  */
  .yourclass[lazy=loading] {
    /*your style here*/
  }
  .yourclass[lazy=error] {
    /*your style here*/
  }
  .yourclass[lazy=loaded] {
    /*your style here*/
  }
</style>

最后抛出vue-lazyload官网源码
https://github.com/hilongjw/vue-lazyload