怪癖模式:图像和显示:无

当图像有显示时:none或在元素with中 Display:none，浏览器可能会选择在显示之前不下载图像 设置为另一个值。 当您将显示切换为block时，只有Opera才能下载图像。 所有其他浏览器立即下载它。

浏览器正变得越来越智能。现在你的浏览器(取决于版本)可能会跳过图像加载，如果它可以确定它是没有用的。

图像有一个显示:none样式，但它的大小可以由脚本读取。 Chrome v68.0不加载图像如果父隐藏。

你可以在那里查看:http://jsfiddle.net/tnk3j08s/

您也可以通过查看浏览器开发工具的“network”选项卡来检查它。

注意，如果浏览器是在一个小的CPU计算机上，不需要渲染图像(和布局页面)将使整个渲染操作更快，但我怀疑这在今天是否真的有意义。

如果你想阻止图像加载，你可以不添加IMG元素到你的文档(或设置IMG src属性为"data:"或"about:blank")。

如果你让图片成为CSS中一个div的背景图片，当这个div被设置为'display: none'时，图片将不会被加载。

只是在扩展布伦特的解决方案。

对于纯CSS解决方案，您可以执行以下操作，它还可以使img框实际表现为响应式设计设置中的img框(这就是透明png的用途)，如果您的设计使用响应式动态调整图像，这尤其有用。

<img style="display: none; height: auto; width:100%; background-image: 
url('img/1078x501_1.jpg'); background-size: cover;" class="center-block 
visible-lg-block" src="img/400x186_trans.png" alt="pic 1 mofo">

只有在触发与visible-lg-block绑定的媒体查询并且display:none被更改为display:block时，图像才会被加载。透明png用于允许浏览器在流体设计中为<img>块(因此是背景图像)设置适当的高宽比(height: auto;宽度:100%)。

1078/501 = ~2.15  (large screen)
400/186  = ~2.15  (small screen)

所以你最终会得到如下3个不同的视口:

<img style="display: none; height: auto; width:100%; background-image: url('img/1078x501_1.jpg'); background-size: cover;" class="center-block visible-lg-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/517x240_1.jpg'); background-size: cover;" class="center-block visible-md-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/400x186_1.jpg'); background-size: cover;" class="center-block visible-sm-block" src="img/400x186_trans.png" alt="pic 1">

在初始加载期间，只有默认的媒体视口大小的图像加载，然后，根据您的视口，图像将动态加载。

没有javascript!

HTML5 <picture>标签将帮助您根据屏幕宽度解析正确的图像来源

显然，在过去的5年里，浏览器的行为并没有太大的变化，许多人仍然会下载隐藏的图像，即使在它们上设置了display: none属性。

尽管有一个媒体查询的解决方案，它只能在图像被设置为CSS背景时才有用。

虽然我认为这个问题只有一个JS解决方案(延迟加载，图片填充等)，但似乎有一个很好的纯HTML解决方案是HTML5的开箱即用。

这是<picture>标签。

MDN是这样描述的:

HTML <picture>元素是一个容器，用于为其中包含的特定<img>指定多个<source>元素。浏览器将根据页面的当前布局(图像将出现在框的约束)和它将显示在设备上(例如普通或hiDPI设备)选择最合适的源。

下面是如何使用它:

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

背后的逻辑

只有当所有媒体规则都不应用时，浏览器才会加载img标记的源代码。当浏览器不支持<picture>元素时，它将再次回退到显示img标记。

通常，您会将最小的图像作为<img>的源，这样就不会为较大的屏幕加载较重的图像。反之亦然，如果应用了媒体规则，则不会下载<img>的源文件，而是下载相应的<source>标记的url内容。

这里唯一的缺陷是，如果浏览器不支持该元素，它将只加载小图像。 另一方面，在2017年，我们应该以移动优先的方式思考和编码。

在有人太兴奋之前，这里是当前浏览器对<picture>的支持:

桌面浏览器

移动浏览器

关于浏览器支持的更多信息，您可以在can I use。

好的方面是html5please的句子是用一个回退。我个人打算采纳他们的建议。

关于标签的更多信息可以在W3C规范中找到。这里有一个免责声明，我觉得这很重要:

图片元素与看起来相似的视频和音频元素有些不同。虽然它们都包含源元素，但当元素嵌套在图片元素中时，源元素的src属性没有意义，而且资源选择算法是不同的。同样，图片元素本身也不显示任何东西;它只是为它所包含的img元素提供了一个上下文，使它能够从多个url中进行选择。

它说的是，它只帮助你在加载图像时提高性能，通过提供一些上下文。

你仍然可以使用一些CSS魔法来隐藏小设备上的图像:

<style>
  picture { display: none; }

  @media (min-width: 600px) {
    picture {
      display: block;
    }
  }
</style>

<picture>
 <source srcset="the-real-image-source" media="(min-width: 600px)">
 <img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>

因此浏览器不会显示实际的图像，只会下载1x1像素的图像(如果您多次使用它，它可以被缓存)。但是要注意，如果浏览器不支持<picture>标记，即使在桌面屏幕上也不会显示实际图像(因此您肯定需要在那里进行填充备份)。

如果div设置为“display:none”，则会加载div元素的背景图像。

不管怎样，如果同一个div有一个父元素，并且父元素被设置为'display:none'，子元素的背景图像将不会加载。：）

使用bootstrap的示例:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="col-xs-12 visible-lg"> <div style="background-image: url('http://via.placeholder.com/300x300'); background-repeat:no-repeat; height: 300px;">lg</div> </div> <div class="col-xs-12 visible-md"> <div style="background-image: url('http://via.placeholder.com/200x200'); background-repeat:no-repeat; height: 200px;">md</div> </div> <div class="col-xs-12 visible-sm"> <div style="background-image: url('http://via.placeholder.com/100x100'); background-repeat:no-repeat; height: 100px">sm</div> </div> <div class="col-xs-12 visible-xs"> <div style="background-image: url('http://via.placeholder.com/50x50'); background-repeat:no-repeat; height: 50px">xs</div> </div>

不。如果您正在考虑节省手机用户带宽，图像将像往常一样加载，并且仍将使用用户的带宽。你能做的就是使用媒体查询和过滤你想要加载图像的设备。你的图像必须设置为一个div的背景图像等，而不是一个标签，因为图像标签将加载图像，无论屏幕大小和媒体查询设置。