Robot Img

类名

样式

图片地址

图片默认地址

出错的时候的图片地址

可以单个组件自定义，比如

<RobotImg srcTpl={(attrs) => `${attrs.src}?some_img_params_w=${artts.ratioWidth}`} />

图片不同状态下的样式名前缀

懒加载模式

• 'scroll' 检测容器滚动
• 'resize' 检测当前节点 DOMRect 变化
• 'off' 关闭懒加载，图片不做任何检测，会直接处理 src

当 lazy === 'resize' 时，判断是否要更新图片 默认当面积变大至少20%，才更新图片

设置图片为异步加载 这个时候，useImg 返回的 state.status 可能会 blank -> loading -> loaded 或者 blank -> loading -> error 当 loadingType === 'src' 时，状态会体现在 state.src 上，

• state.status === 'loading' 使用 defaultSrc
• state.status === 'error' 使用 errorSrc 当 loadingType === 'css' 时，
• state.status === 'loading' ， state.src = ''
• state.status === 'error' ， state.src = '' 此时需要根据不同状态下的样式来体现

预处理图片 注意当 loadingType === 'src' || loadingType === 'css' 存在时，该属性才会生效 默认处理方式：

const img: HTMLImageElement = new Image()
if (crossOrigin) {
  img.crossOrigin = crossOrigin
}
img.src = imgSrc

注意当 loadingType === 'src' || loadingType === 'css' 存在时，该属性才会生效

加载失败时调用 注意当 loadingType === 'src' || loadingType === 'css' 存在时，该属性才会生效

加载成功时调用 注意当 loadingType === 'src' || loadingType === 'css' 存在时，该属性才会生效

真实使用的 src

未处理前的 src

当前状态

图片节点的 DOMRect

获取节点 DOM ref

组件状态

当前使用的 imgPool

处理后的 DOM 节点属性

获取默认图片

是否使用 webp 格式的图片

设备像素比

对应 dom 节点的 DOMRect

img.src

返回按比例放大图片的 width

返回按比例放大图片的 height

是否使用 webp 格式的图片

设备像素比

对应 dom 节点的 DOMRect

img.src

全局默认图片

图片加载出错时的全局默认设置图片

默认加载设置

全局样式名

图片不同状态下的样式名前缀

当 lazy === 'resize' 时，判断是否要更新图片 默认当 width 或者 height 变大至少20%，才更新图片

容器节点，也可以是 window

设置需要检测的容器区域

心跳间隔时间，单位 ms

全局的 srcTpl 设置

一些全局变量

名字，用于一些问题的排查

所有图片实例

当前发生事件类型

容器检测区域

心跳间隔时间

容器节点

全局设置

名称

容器如果是 DOM 节点，判断容器是否和 window 有重叠

src 模板

判断图片所在矩形区域与容器区域是否有重叠

重置

初始化

销毁

发生了某个事件

心跳更新函数

执行心跳

停止心跳

根据 globalVars.className 设置一个全局默认样式 默认样式为：

.${globalVars.className} {
 transition: background-image .3s;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
}

当前实例是否需要检测

触发检测时调用

每次心跳时执行