vue 图片加载loading动画及加载出错处理

图片的加载速度往往影响着网页整体的用户体验，尤其对于包含大量图片的网站或者类似微信的会话聊天窗口。对图片添加加载动画，防止出现大面积空白，不失为一个减缓用户焦虑的高效解决方案。
vue-image-preview demo地址

下面是基于vue自定义指令的实现思路：

创建一个自定义指令文件夹directives，新建 imagePreview.js

export const imagePreview = {
  inserted(el) {
    var img = new Image();
    img.src = el.firstChild.src;

    if (!el.firstChild.src) return;
    // 创建一个loading的img标签
    let loadImg = document.createElement("img");
    loadImg.classList.add("img-loading");
    loadImg.src = require("../assets/loading.gif");
    el.appendChild(loadImg);  // 插入dom
    el.style.background = "#F0F4F8";

    img.onload = () => {
      el.removeChild(loadImg); // 加载成功移除loading
      el.style.background = "";
    };
    // 原图片加载出错
    img.onerror = () => {
      // 故意做的延时方便展示
      setTimeout(() => {
        el.classList.add("display-flex");
        el.style.background = "#333";
        el.innerHTML = `<span style="color: #fff;">图片已过期<br>无法查看</span>`;
      }, 1000)
    };
  },
  update(el) {
    var img = new Image();
    img.src = el.firstChild.src;
    img.onerror = () => {
      el.classList.add("display-flex");
      el.style.background = "#333";
      el.innerHTML = `<span style="color: #fff;">图片已过期<br>无法查看</span>`;
    };
  }
};

在directives里面新建一个index.js

import { imagePreview } from "./imagePreview";

export default {
  imagePreview
}

在main.js全局注册自定义指令：

import directives from "./directives";

Vue.config.productionTip = false;

//通过directive下的index.js文件导入指令
Object.keys(directives).forEach(key => {
  Vue.directive(key, directives[key]);
});

如何使用imagePreview指令：

<div class="list-item" v-for="item in list" :key="item.id" v-imagePreview>
  <img class="img" :src="item.src">
</div>

因为需要做图片加载出错处理功能，所以在img外多嵌了一层div，如果不需要做出错处理，可以去掉，然后将 el.firstChild.src 改为 el.src 然后做下思路转换，用中间变量保存el.src，把loading的路径赋到el.src，创建一个img标签，将原来的图片路径赋值给新img标签，新img标签加载成功再进行路径替换即可。

实现效果：

vue指令钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

指令钩子函数参数：

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode： Vue编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

如果这篇文章对你有帮助的话点个赞再走吧~~