如果你让图片成为CSS中一个div的背景图片，当这个div被设置为“display: none”时，图片将不会被加载。当CSS被禁用时，它仍然不能加载，因为CSS是禁用的。

如果你让图片成为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!

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

如果你让图片成为CSS中一个div的背景图片，当这个div被设置为“display: none”时，图片将不会被加载。当CSS被禁用时，它仍然不能加载，因为CSS是禁用的。

答案不像简单的是或不是那么简单。看看我最近做的一个测试的结果:

在Chrome浏览器:所有8个截图-*图像加载(img 1) 在Firefox中:仅加载当前正在显示的1个截图*图像(img 2)

所以在深入挖掘之后，我发现了这个，这解释了每个浏览器如何处理加载基于css显示的img资产:none;

摘自博客文章:

Chrome and Safari (WebKit): WebKit downloads the file every time except when a background is applied through a non-matching media-query. Firefox: Firefox won't download the image called with background image if the styles are hidden but they will still download assets from img tags. Opera: Like Firefox does, Opera won't load useless background-images. Internet Explorer: IE, like WebKit will download background-images even if they have display: none; Something odd appears with IE6 : Elements with a background-image and display: none set inline won't be downloaded... But they will be if those styles aren't applied inline.

** 2019回答**

在正常情况下显示:none不阻止图像被下载

/*will be downloaded*/

#element1 {
    display: none;
    background-image: url('https://picsum.photos/id/237/100');
}

但是如果一个祖先元素有display:none，那么后代的图像将不会被下载

/* Markup */

<div id="father">
    <div id="son"></div>
</div>


/* Styles */

#father {
    display: none;
}

/* #son will not be downloaded because the #father div has display:none; */

#son {
    background-image: url('https://picsum.photos/id/234/500');
}

其他阻止下载映像的情况:

1-目标元素不存在

/* never will be downloaded because the target element doesn't exist */

#element-dont-exist {
    background-image: url('https://picsum.photos/id/240/400');
}

2-两个相等的类加载不同的图像

/* The first image of #element2 will never be downloaded because the other #element2 class */

#element2 {
    background-image: url('https://picsum.photos/id/238/200');
}

/* The second image of #element2 will be downloaded */

#element2 {
    background-image: url('https://picsum.photos/id/239/300');
}

你可以在这里观看:https://codepen.io/juanmamenendez15/pen/dLQPmX