隐藏图片仍加载是因为视觉隐藏（如visibility: hidden）不阻止HTTP请求；真正阻止需让浏览器认为图片当前不需要，display: none仅在DOM渲染前或图片未开始加载时生效才有效。
隐藏的图片仍加载，说明你用的只是视觉隐藏（比如 visibility: hidden 或 opacity: 0），浏览器根本不管“你看不见”，只要 src 存在，就会发起 HTTP 请求。真正阻止加载，必须让浏览器认为“这张图当前不需要”。
display: none 为什么有时还是加载了？
关键在于设置时机和顺序：
-
display: none只有在 DOM 渲染前或图片尚未开始加载时生效，才能阻止请求；如果src已写死在 HTML 里，浏览器解析到标签就立刻开始加载，此时再设display: none已晚 - 旧版 Safari（display: none 阻止未加载图片的处理不一致，可能仍发请求
- 用 JS 动态设置时，若先设
el.style.display = 'none'再清src，中间存在极短时间窗口，某些浏览器会抢在清空前触发加载
必须清空 src 才能彻底阻止请求
仅靠 CSS 隐藏不够，得动 src 属性本身：
- 设为
img.src = ''：多数浏览器中止加载，但控制台可能报Failed to load resource（无害） - 设为透明占位符更稳妥：
img.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="，零网络请求、兼容所有现代浏览器 - 绝对不要用
javascript:void(0)或#，部分浏览器仍尝试解析，甚至报错 - 如果图片原本通过
data-src存着，那就别提前赋给src——懒加载逻辑没触发前，src就该为空或占位符
loading="lazy" 不是万能解药
它只对首次渲染时不在视口内的 <img> 生效，且依赖浏览器实现：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
立即学习“前端免费学习笔记（深入）”；
- 加了
loading="lazy"却还在隐藏状态下加载？大概率是父容器用了transform、opacity或will-change，破坏了浏览器滚动根检测 - 服务端已输出完整
src（如 SSR 场景），客户端 JS 后续再改src，loading属性会被忽略 -
<picture>里的<source>不支持loading，属性必须写在最外层<img>上 - 首屏内但被
display: none包裹的图，loading="lazy"无效——浏览器仍按默认行为加载
真正可靠的组合方案
要确保“隐藏 = 不加载”，得把三件事串起来：
- HTML 初始状态：图片
src不写真实地址，用data-src存着，或直接设为透明 GIF 占位符 - CSS 层面：用
display: none隐藏容器，同时确保图片自身也明确不可见（如.hidden-img { display: none; }） - JS 控制流：显示前才把
data-src赋给src，并移除display: none；隐藏时立即清空src并重置为占位符 - 特别注意顺序：隐藏操作必须是
img.src = placeholder→el.style.display = 'none'，反过来在旧 Safari 下可能白忙活
最容易被忽略的是：你以为只是“藏一张图”，实际要协调 HTML 结构、CSS 渲染时机、JS 执行顺序、浏览器版本差异这四层。任何一层断掉，都可能看到那个不该出现的网络请求。
