场景: 聊天 消息列表接口,图片后端仅记录图片 key ,独立接口 获取图片 base64 数据

前端需要 懒加载渲染图片,即 懒加载,用独立请求图片 base64 接口 接口数据格式为 json,其中一个字段为 图片 base64 数据

目前是获取消息列表时 同步处理,并发拿图片 base64, 消息列表显示出来比较慢

怎么能优雅实现这样的需求
举报· 62 次点击
登录 注册 站外分享
2 条回复  
vituralfuture 小成 2024-5-12 18:18:00
图片链接放 data-src 里,img 元素进入视口后把 data-src 赋给 src
WJYuan 小成 2024-5-12 19:06:26
@cnbattle #2 这种情况不影响啊,只是把 data-src 替换为 key 而已,思路是一样的,你
1.首先获取列表借口,此时图片全部渲染为 loading 图
2.Intersection Observe API 请求 base64
3.请求到 base64 后替换 src
返回顶部