关于图片加载，你需要学习一下

从何而来

这篇文章，出自我自己的开源组件库 fighting-design[1] 中的 Avatar 头像[2] 组件的 load-image[3] 类。

相比于其它的静态组件，像图片加载这种的组件，内部我做了很多的优化，对于图片的加载和错误的处理，我都尽可能的将每种可能出现的结果都考虑到，针对每种不确定的结果做出相应的提示，以便于提升用户体验。

设计思路

我的设计想法是：通过一个加载类，传入 元素、 和 。先创建出一个虚拟的 元素进行尝试加载，加载成功获失败都会进入下一步的函数，做出对应从处理逻辑。

初步设计

首先类中先有一个加载的方法 ，代码如下：

首先我创建了一个 的加载类，需要传入 参数作为最终需要渲染的 节点， 是传入的组件内部的 参数，内部包含图片需要加载的 路径， 包括一些回调参数。

类的内部有个 的方法，调用可创建一个虚拟的 元素，直接将传入的 赋值并加载。监听上面的 和 事件，即可监听到图片是否加载成功，以便做出不同的状态。

成功和失败

对于成功或失败的处理，我新增了 和 方法，来处理加载成功和失败之后的不同处理状态

对于加载成功，处理方式是，将传入的真是的 节点直接赋值给传入的 即可完成加载。

加载失败

对于加载失败的处理， 内部做了很多处理，比如可以传入 的备用路径加载，在 加载失败之后，如果 存在的话，那么就需要加载 。接下来继续完善类方法：

首先要在 方法中判断是否存在 ，如果有 那么就需要重新调用 重新加载，但是现在的代码显然不能满足需要，所以 需要接收一个可选的参数为 ，因为只有在加载失败之后才需要再次调用该方法传入 ，所以方法内部就可以根据 是否存在，来做出不同的处理：

但是上面代码存在两个问题：

首先我们发现，在 加载成功的方法中，将真实 始终赋值的始终 是 ：

但是 并不是始终可以加载成功的，所以还是需要动态的去将真正加载成功的 传给 方法，那么真正加载成功的 也就是在 方法中。并且还要加入成功的 。

其次，在处理加载失败的 方法中，因为判断了如果存在 就继续调用 加载方法重新加载。问题是，如果传入了 那么 其实是始终为真的，这也就导致了死循环，会重复调用加载函数。

所以就需要给它一个可以变为假的时机，那么修复方法为：在传给 方法之后，将 清空，这样加载一次之后就可以判断为假了，所以完整代码为：

回调函数

有些时候，我们还需要通过一个布尔值来判断图片是否加载成功，或者进行其它判断。

内部对图片加载失败做了特殊的样式处理来提示用户，所以需要一个布尔值和 来展示不同的状态，这里就涉及到了类的第四个参数，也就是一个可选的回调函数

这样就可以在加载成功和加载失败的时候通过回调函数来返回一个布尔值判断是否加载成功，代码如下：

上面代码即可实现判断是否加载成功的需求。

当然，回调函数你可以尽情的发挥想象做出更多的事情，这里仅提供部分用法。

⌛ 懒加载

图片的懒加载，也是一个图片加载必备的功能了，这里我使用的是内置的 IntersectionObserver[4] 接口，对于这个方法，这里不过多描述，各位可以通过 MDN[5] 进行学习。

对于懒加载，因为这是一个可选的属性，并不是每次都需要，所以我将懒加载单独抽离出来的一个 类进行实现，再将 类继承到 类，代码如下：

接口可以判断 元素是否进入可视区域，通过内置方法判断进入可视区域之后，执行父类的 方法进行加载，从而实现懒加载。

对外接口

对于 类和 类， 并没有直接暴露出去提供使用，而是暴露出了一个全新的 函数，让它去根据是否为懒加载而实例化不同的类，再调用加载方法：

测试使用

写好的函数测试一下看看：

可以看到，是成功执行的。

完整代码

完整代码可参考 load-image[6]

参考资料

[1]

fighting-design: https://github.com/FightingDesign/fighting-design

[2]

Avatar 头像: https://fighting.tianyuhao.cn/components/avatar.html

[3]

load-image: https://github.com/FightingDesign/fighting-design/blob/master/packages/fighting-design/_utils/load-image.ts

[4]

IntersectionObserver: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver

[5]

MDN: https://developer.mozilla.org/zh-CN/

[6]

load-image: https://github.com/FightingDesign/fighting-design/blob/master/packages/fighting-design/_utils/load-image.ts

- EOF -