CSS display:none无法阻止图片加载？移动端如何阻止图片加载？

嘿，这个问题我之前也帮不少开发者踩过坑——确实，display:none只是把图片从视觉上隐藏了，但浏览器在解析HTML的时候，看到<img>标签就会立刻发起资源请求，等CSS解析生效的时候，图片早就开始加载了，完全起不到节省移动端加载速度的作用。

下面给你分场景介绍几种靠谱的CSS实现方案：

1. 背景图片场景（最推荐） #

如果你的图片是作为元素的背景图使用的，那用媒体查询就能完美解决：

/* 桌面端正常加载并显示背景图 */
.desktop-only-bg {
  background-image: url('your-desktop-image.jpg');
  /* 其他背景样式：大小、重复等 */
  background-size: cover;
  background-repeat: no-repeat;
}

/* 移动端直接移除背景图，浏览器不会请求资源 */
@media (max-width: 768px) {
  .desktop-only-bg {
    background-image: none;
  }
}

原理很简单：背景图是由CSS控制加载的，当媒体查询匹配移动端时，background-image设为none，浏览器就不会去请求这张图片了，既省流量又提速度。

2. <img>标签场景（需配合HTML调整） #

如果是原生<img>标签，单纯靠CSS没法直接阻止浏览器加载（因为HTML解析优先级高于CSS），但我们可以用一个小技巧绕过去：把真实图片地址存在data-src属性里，用CSS在桌面端把它渲染出来，移动端则不处理：

调整后的HTML： #

<!-- 不要设置src属性，用data-src存真实图片地址 -->
<div class="responsive-img" data-src="your-image.jpg" alt="图片描述"></div>

对应的CSS： #

/* 桌面端：把data-src的内容作为图片渲染 */
@media (min-width: 769px) {
  .responsive-img {
    content: attr(data-src);
    /* 模拟原生img的自适应样式 */
    width: 100%;
    height: auto;
    display: block;
  }
}

/* 移动端：直接隐藏，不会触发任何资源请求 */
@media (max-width: 768px) {
  .responsive-img {
    display: none;
  }
}

注意：content属性在块级元素上的表现和原生<img>可能略有差异，你可能需要微调样式来匹配你的需求。

3. 结合<picture>元素的方案（兼容更好） #

虽然<picture>是HTML标签，但它可以配合CSS媒体查询实现精准控制，本质上也是利用了CSS的媒体查询逻辑：

HTML结构： #

<picture>
  <!-- 移动端加载1x1空白GIF（极小，几乎不占流量） -->
  <source media="(max-width: 768px)" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
  <!-- 桌面端加载真实图片 -->
  <source media="(min-width: 769px)" srcset="your-image.jpg">
  <!-- 降级方案：不支持picture的浏览器加载默认图 -->
  <img src="your-image.jpg" alt="图片描述">
</picture>

CSS隐藏移动端的空白图： #

@media (max-width: 768px) {
  picture img {
    display: none;
  }
}

这个方案的好处是兼容性好，移动端只会加载那个几字节的空白GIF，完全不影响加载速度，同时视觉上也看不到任何内容。

总结一下：最省心的还是用背景图配合媒体查询；如果必须用<img>标签，就结合data-src+CSS的方式；<picture>则是兼顾兼容性的稳妥选择。千万别再只用display:none啦，根本解决不了加载问题~

内容的提问来源于stack exchange，提问作者Jacky