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

 ,这篇文章，出自我自己的开源组件库 fighting-design[2] 中的 Avatar 头像[3] 组件的 load-image[4] 类。,相比于其它的静态组件，像图片加载这种的组件，内部我做了很多的优化，对于图片的加载和错误的处理，我都尽可能的将每种可能出现的结果都考虑到，针对每种不确定的结果做出相应的提示，以便于提升用户体验。,我的设计想法是：通过一个加载类，传入 dom 元素、 props 和 emit。先创建出一个虚拟的 image 元素进行尝试加载，加载成功获失败都会进入下一步的函数，做出对应从处理逻辑。,首先类中先有一个加载的方法 loadCreateImg，代码如下：,首先我创建了一个 Load 的加载类，需要传入 node 参数作为最终需要渲染的 dom 节点，props 是传入的组件内部的 props 参数，内部包含图片需要加载的 src 路径，emit 包括一些回调参数。,类的内部有个 loadCreateImg 的方法，调用可创建一个虚拟的 Image 元素，直接将传入的 props.src 赋值并加载。监听上面的 error 和 load 事件，即可监听到图片是否加载成功，以便做出不同的状态。,对于成功或失败的处理，我新增了 onerror 和 onload 方法，来处理加载成功和失败之后的不同处理状态,对于加载成功，处理方式是，将传入的真是的 dom 节点直接赋值给传入的 props.src 即可完成加载。,对于加载失败的处理，Fighting Design 内部做了很多处理，比如可以传入 err-src 的备用路径加载，在 src 加载失败之后，如果 err-src 存在的话，那么就需要加载 err-src 。接下来继续完善类方法：,首先要在 onerror 方法中判断是否存在 err-src，如果有 err-src 那么就需要重新调用 loadCreateImg 重新加载，但是现在的代码显然不能满足需要，所以 loadCreateImg 需要接收一个可选的参数为 errSrc，因为只有在加载失败之后才需要再次调用该方法传入 err-src，所以方法内部就可以根据 err-src 是否存在，来做出不同的处理：,但是上面代码存在两个问题：,但是 src 并不是始终可以加载成功的，所以还是需要动态的去将真正加载成功的 src 传给 onload 方法，那么真正加载成功的 src 也就是在 load 方法中。并且还要加入成功的 emit。,所以就需要给它一个可以变为假的时机，那么修复方法为：在传给 loadCreateImg 方法之后，将 errSrc 清空，这样加载一次之后就可以判断为假了，所以完整代码为：,有些时候，我们还需要通过一个布尔值来判断图片是否加载成功，或者进行其它判断。,Fighting Design 内部对图片加载失败做了特殊的样式处理来提示用户，所以需要一个布尔值和 v-if 来展示不同的状态，这里就涉及到了类的第四个参数，也就是一个可选的回调函数,这样就可以在加载成功和加载失败的时候通过回调函数来返回一个布尔值判断是否加载成功，代码如下：,上面代码即可实现判断是否加载成功的需求。,当然，回调函数你可以尽情的发挥想象做出更多的事情，这里仅提供部分用法。,图片的懒加载，也是一个图片加载必备的功能了，这里我使用的是内置的 IntersectionObserver[5] 接口，对于这个方法，这里不过多描述，各位可以通过 MDN[6] 进行学习。,对于懒加载，因为这是一个可选的属性，并不是每次都需要，所以我将懒加载单独抽离出来的一个 Lazy 类进行实现，再将 Lazy 类继承到 Load 类，代码如下：,IntersectionObserver 接口可以判断 dom 元素是否进入可视区域，通过内置方法判断进入可视区域之后，执行父类的 loadCreateImg 方法进行加载，从而实现懒加载。,对于 Load 类和 Lazy 类，Fighting Design 并没有直接暴露出去提供使用，而是暴露出了一个全新的 loadImage 函数，让它去根据是否为懒加载而实例化不同的类，再调用加载方法：,写好的函数测试一下看看：,可以看到，是成功执行的。,完整代码可参考 load-image[7],这篇文章的图片加载设计，取自我带领社区小伙伴一起做的开源 vue3 组件库 Fighting Design[8] 中的部分源码，想参与开源组件库的开发也可以直接加我的微信：VirgoTyh 一起共同学习。,欢迎大家多多点赞 评论 Star，还有什么需要完善的可以给我评论留言。不要惧怕写出不完美的代码，只要在后续迭代过程中见招拆招，代码就会变得越来越完善，框架也会变得越来越健壮。