HTML本身无图片资源生命周期管理，需JS补全：监听load/error事件判断真实加载状态，用LRU缓存复用img实例，手动清理事件与blob URL，形成加载、错误、缓存、释放闭环。
HTML 本身没有“图片资源生命周期管理”这个内置机制——img 标签加载完就静默存在，不通知你何时开始加载、何时失败、何时被回收。所谓“全生命周期”，其实是你用 JS 主动补全的链条：从路径准备 → 加载触发 → 状态监听 → 错误降级 → 内存清理 → 缓存复用。
怎么监听图片是否真正加载成功（不是 DOM 就绪）
DOMContentLoaded 只保证 img 元素已插入 DOM，但 img.naturalWidth 仍可能是 0。必须等加载完成才能读尺寸或做布局计算。
- 用
img.addEventListener('load', handler)—— 成功时触发，最可靠 - 用
img.addEventListener('error', handler)—— 路径错、404、CORS 拒绝都会进这里 - 别依赖
img.complete判断：它在某些浏览器中会提前返回true（比如缓存未就绪但状态已设） - 批量监听可写：
document.querySelectorAll('img').forEach(img => { img.addEventListener('load', ...); img.addEventListener('error', ...); })
图片加载失败时怎么自动降级并定位问题
仅靠 alt 文字看不出是路径写错、权限问题，还是 CDN 故障。得让错误可观察、可追踪。
- 单图内联处理：
<img src="xxx.jpg" onerror="this.src='placeholder.svg'; this.title='加载失败: '+this.src;"> - 开发期快速排查：在控制台运行
Array.from(document.images).filter(i => i.naturalWidth === 0 && !i.complete)，直接列出所有“卡住”的图片 - 路径建议统一用相对路径，且全部以 HTML 文件为基准（如
./assets/img/logo.png），避免混用images/和../images/导致部署后失效 - 服务端可加响应头
X-Image-Source: cdn-v2，前端在error回调里读取它，辅助归因
怎么避免重复加载同一张图（缓存 + LRU 控制）
浏览器有 HTTP 缓存，但 JS 层若反复创建 new Image() 或反复设置 img.src，仍可能触发多余请求（尤其跨域或禁用缓存时）。
立即学习“前端免费学习笔记（深入）”；
- 手动维护一个
Map缓存已加载的HTMLImageElement实例，key 是src字符串 - 用 LRU 策略限制大小（如最多存 20 张）：
class LRUCache { constructor(maxSize = 20) { this.cache = new Map(); this.maxSize = maxSize; } get(url) { if (!this.cache.has(url)) return null; const item = this.cache.get(url); this.cache.delete(url); this.cache.set(url, item); return item.img; } set(url, img) { this.cache.set(url, { img, timestamp: Date.now() }); if (this.cache.size > this.maxSize) { const firstKey = this.cache.keys().next().value; this.cache.delete(firstKey); } } } - 注意：缓存的是
img元素，不是src字符串本身；不能直接复用同一个img插入多个位置（会移动节点） - 若图片需多次显示，应克隆：
cache.get(url)?.cloneNode(true)
什么时候该清理图片资源（内存与事件泄漏）
图片本身不占多少内存，但绑定的事件监听器、关联的定时器、或通过 URL.createObjectURL() 创建的 blob URL 不清理，会导致持续泄漏。
- 移除
img前，手动清除事件：img.removeEventListener('load', handler); img.removeEventListener('error', handler); - 用
createObjectURL()加载本地文件后，必须配对调用URL.revokeObjectURL()，否则 blob 一直驻留内存 - 不要在
disconnectedCallback里假设图片已卸载——自定义元素断开时，img可能还在其他地方引用着；清理逻辑要基于实际使用场景，比如组件销毁时主动调用revokeObjectURL或清空缓存 - 长期页面（如后台系统）中，定期运行
LRUCache的 size 检查 + 过期淘汰（按 timestamp），比等用户关页更可控
真正难的不是某一步怎么做，而是把加载、错误、缓存、释放这四个环节串成闭环，并确保每个环节的边界清晰——比如“错误回调里不该再发起新请求”，“缓存命中时不能跳过 load 事件绑定”。漏掉任意一环，都可能在低网速、高并发或长时间运行时暴露问题。
