何来
这首诗，出自于我自己的开放源码模块库 fighting-design[1] 中的 Avatar 肖像[2] 模块的 load-image[3] 类。
较之于其他的动态模块，像相片读取这种的模块，外部我做了许多的强化，对相片的读取和严重错误的处置，我都尽量的将五种可能出现的结论都考虑到，特别针对五种不确认的结论作出适当的提示信息，以期于提高使用者新体验。
结构设计路子
我的结构设计设想是：通过两个读取类，传至 原素、 和 。先建立出两个交互式的 原素进行试著读取，读取获得成功获失利单厢步入下一步棋的表达式，作出相关联从处置方法论。
初步结构设计
具体来说类中先有两个读取的方式 ，标识符如下表所示：
具体来说我建立了两个 的读取类，须要传至 模块作为最后须要图形的 结点， 是传至的模块外部的 模块，外部包涵相片须要读取的 方向， 包括一些反弹模块。
类的外部有位 的方式，初始化可建立两个交互式的 原素，间接将传至的 表达式并读取。窃听下面的 和 该事件，方可窃听到相片与否读取获得成功，以期作出相同的状况。
获得成功和失利
对获得成功或失利的处置，我追加了 和 方式，来处置读取获得成功和失利后的相同处置状况
对读取获得成功，处置方式是，将传至的啊的 结点间接表达式给传至的 方可顺利完成读取。
读取失利
对读取失利的处置， 外部做了许多处置，比如说能传至 的可供使用方向读取，在 读取失利后，假如 存有不然，因此就须要读取 。接下去继续健全类方式：
具体来说要在 方式中推论与否存有 ，假如有 那么就须要再度初始化 再度读取，但现在的标识符或许不能满足须要，因此 须要转交两个较旧的模块为 ，因为只有在读取失利后才须要再度初始化该方式传至 ，因此方式外部就能根据 与否存有，来作出相同的处置：
但下面标识符存有两个问题：
具体来说我们发现，在 读取获得成功的方式中，将真实 始终表达式的始终 是 ：
但 并不是始终能读取获得成功的，因此还是须要动态的去将真正读取获得成功的 传给 方式，因此真正读取获得成功的 也就是在 方式中。并且还要加入获得成功的 。
其次，在处置读取失利的 方式中，因为推论了假如存有 就继续初始化 读取方式再度读取。问题是，假如传至了 因此 其实是始终为真的，这也就导致了死循环，会重复初始化读取表达式。
因此就须要给它两个能变为假的时机，因此修复方式为：在传给 方式后，将 清空，这样读取一次后就能推论为假了，因此完整标识符为：
反弹表达式
有些时候，我们还须要通过两个布尔值来推论相片与否读取获得成功，或者进行其他推论。
外部对相片读取失利做了特殊的样式处置来提示信息使用者，因此须要两个布尔值和 来展示相同的状况，这里就涉及到了类的第四个模块，也就是两个较旧的反弹表达式
这样就能在读取获得成功和读取失利的时候通过反弹表达式来返回两个布尔值推论与否读取获得成功，标识符如下表所示：
下面标识符方可实现推论与否读取获得成功的需求。
当然，反弹表达式你能尽情的发挥想象作出更多的事情，这里仅提供部分用法。
⌛ 懒读取
相片的懒读取，也是两个相片读取必备的功能了，这里我使用的是内置的 IntersectionObserver[4] 接口，对这个方式，这里不过多描述，各位能通过 MDN[5] 进行自学。
对懒读取，因为这是两个较旧的属性，并不是每次都须要，因此我将懒读取单独抽离出来的两个 类进行实现，再将 类继承到 类，标识符如下表所示：
接口能推论 原素与否步入可视区域，通过内置方式推论步入可视区域后，执行父类的 方式进行读取，从而实现懒读取。
对外接口
对 类和 类， 并没有间接暴露出去提供使用，而是暴露出了两个全新的 表达式，让它去根据与否为懒读取而实例化相同的类，再初始化读取方式：
测试使用
写好的表达式测试呵呵看看：
能看到，是获得成功执行的。
完整标识符
完整标识符可参考 load-image[6]
参考资料
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
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 –
