不该，除非广告图是首屏LCP元素且无交互延迟；多数广告需在SDK初始化后、容器渲染前用new Image()动态预加载，并控制并发、及时清理内存。
广告图片该不该用 link rel="preload"？
不该，除非它和首屏 LCP 元素强绑定（比如开屏广告图直接撑满 viewport 且无交互延迟）。绝大多数网页广告是异步加载、动态插入、带曝光逻辑或 A/B 测试的，link rel="preload" 在 里静态声明会白做：浏览器提前拉了图，但广告 SDK 还没初始化，DOM 还没挂载，图片进缓存却没人用，还挤占首屏带宽。
广告图片真正有效的预加载时机在哪？
在广告容器即将渲染前、SDK 初始化完成后，用 new Image() 主动触发。典型路径是：adUnit.render() → 检查是否已缓存 → 若未缓存，则 preloadImage(adConfig.imageUrl) → 等待 onload 后再把 src 赋给真实 <img alt="HTML怎么设置网页广告图片预加载" > 标签。
- 必须先绑定
onload/onerror，再赋值src；否则缓存命中时事件同步触发，回调丢失 - 赋值后立刻检查
img.complete === true，为true就直接走成功逻辑，不等 onload - 广告位多时别并发 new 10 个
Image，建议用 Promise 队列控制（如每次最多 3 个） - 避免把
Image实例挂在全局或闭包里长期持有，防止内存泄漏
为什么 loading="lazy" 和 display: none 对广告图无效？
它们不是预加载，是反向操作：loading="lazy" 会让 Chrome 延迟到滚动前 500px 才发请求，display: none 的 <img alt="HTML怎么设置网页广告图片预加载" > 在部分浏览器中甚至被推迟 eager 加载——这和广告要“快速曝光”目标完全冲突。更糟的是，这些方式无法监听加载状态，你根本不知道图到底有没有进来。
容易被忽略的兼容细节
广告图常含 query 参数（如 ?t=1734694800&slot=home-banner），而 link rel="preload" 的 href 必须和最终 <img src alt="HTML怎么设置网页广告图片预加载" > 完全一致（大小写、斜杠、参数顺序都不能差），否则预加载进缓存的图不会被复用。但广告 SDK 生成的 URL 往往带时间戳或随机参数，静态 preload 根本不可控。这时候唯一可靠的方式，就是让广告逻辑自己掌控 new Image() 的时机和 URL 构造。
立即学习“前端免费学习笔记（深入）”；
