display:none可彻底移除图片渲染，使其不可见、不占空间且未加载时阻止HTTP请求；但需注意顺序：先清空src再设display:none，避免旧版Safari误加载。
用 display: none 彻底移除图片渲染
这是最直接、最可靠的方式：图片不仅不可见，也不占布局空间，且不会触发加载（如果尚未加载）。适用于你确定该图片在当前视图中完全不需要的情况。
常见错误是只写 visibility: hidden —— 它会让图片“隐形但占位”，还可能触发多余请求；而 display: none 在大多数现代浏览器中会阻止未加载的 <img> 发起 HTTP 请求（前提是 DOM 渲染前已设置）。
实操建议：
- 直接在 HTML 中加内联样式：
<img src="logo.png" style="display:none"> - 或用 class 控制：
<img src="ad-banner.jpg" class="hidden">，配合 CSS.hidden { display: none; } - 注意：JS 动态设置时，优先用
el.style.display = 'none'，而非操作className（避免覆盖其他 class）
用 opacity: 0 隐藏但保留布局和交互
当需要图片“还在那儿”——比如后续要加淡入动画、或它绑定了 click 事件、或父容器高度依赖它的存在时，opacity: 0 更合适。
立即学习“前端免费学习笔记（深入）”；
关键区别：
- 图片仍会加载（即使看不见），占用 DOM 和布局流
- 仍响应鼠标事件（除非额外加
pointer-events: none） - 不支持 IE8 及更早版本（但基本已无影响）
- 若搭配 CSS transition，可实现平滑显隐：
transition: opacity 0.3s
用 src 属性清空或替换为透明占位符
仅隐藏不够？还要节省带宽、防止误加载敏感图片？那就得动 src。
常见做法：
- 设为空字符串：
img.src = ''—— 多数浏览器会中止当前加载，但可能报Failed to load resource警告（无害） - 设为 1×1 透明 GIF：
img.src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="—— 确保无网络请求，兼容性极好 - 不要用
javascript:void(0)或#，部分浏览器仍会尝试解析或报错
用 loading="lazy" + 条件性渲染替代“隐藏”
很多场景下，“隐藏图片”其实是伪需求。比如首屏外广告图、折叠区域里的缩略图——与其加载完再藏，不如压根不加载。
更优解：
- 对非关键图片加
<img loading="lazy" src="...">，由浏览器决定是否加载 - 配合 Intersection Observer，在进入视口前保持
src为空，进入后再赋值 - 服务端渲染时，可直接根据用户角色/设备跳过输出该
<img>标签（比客户端隐藏更彻底）
真正难处理的是那些必须存在于 DOM、又必须动态控制可见性、还要求不触发加载的图片——这时候得组合用 display: none + 提前清空 src，顺序不能错：先清 src，再设 display，否则某些旧版 Safari 仍可能拉取原图。
