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

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

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

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

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

是的，它会渲染得更快一点，只是因为它不需要渲染图像，并且在屏幕上少了一个元素来排序。

如果你不想加载它，留下一个DIV空，你可以在后面加载包含<img>标记的html。

尝试使用firebug或wireshark，就像我之前提到的那样，你会看到即使display:none存在，文件也会被传输。

Opera是唯一一个在显示设置为none时不加载图像的浏览器。 Opera现在已经转移到webkit，即使它们的显示设置为none，也会渲染所有图像。

这里有一个测试页面可以证明这一点:

http://www.quirksmode.org/css/displayimg.html

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

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

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

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

摘自博客文章:

• Chrome和Safari (WebKit):
  WebKit每次都下载文件，除非通过非匹配应用了背景 李媒体查询。< / >
• Firefox:
  如果样式被隐藏，Firefox将不会下载名为with background image的图像，但它们仍然会下载资产 来自img标签。李< / >
• 和Firefox一样，Opera不会加载无用的背景图片。
IE，比如WebKit会下载背景图片，即使它们有display: none; IE6出现了一些奇怪的现象:带有background-image和display的元素:内联设置的none不会被下载…但是他们会的 如果这些样式没有内联应用。

.

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

为了防止获取资源，可以使用Web组件的<template>元素. xml

我们说的是图像不能在手机上加载，对吧?那么如果你只是做一个@media (min-width: 400px){background-image:thing.jpg}

那么，它难道不会只寻找超过一定屏幕宽度的图像吗?

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

<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">

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

<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">

另一种可能是使用<noscript>标记并将图像放置在<noscript>标记中。然后使用javascript删除noscript标签，因为你需要的图像。通过这种方式，您可以使用渐进增强按需加载图像。

使用我写的这个polyfill在IE8中读取<noscript>标签的内容

https://github.com/jameswestgate/noscript-textcontent

如果是这样，有没有一种方法不加载不必要的内容在手机上 浏览器吗?< / p >

使用<img src="" srcset="">

http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/

https://caniuse.com/#feat=srcset

使用@media query CSS，基本上我们只是发布了一个项目，我们在桌面上有一个巨大的树的图像，但没有显示在桌面/移动屏幕上。所以防止图像加载非常简单

下面是一个小片段:

.tree {
background: none top left no-repeat;
}


@media only screen and (min-width: 1200px) {
.tree {
background: url(enormous-tree.png) top left no-repeat;
}
}

你可以使用相同的CSS来显示和隐藏显示/可见/不透明度，但图像仍在加载，这是我们想出的最安全的代码。

源代码:

<div id="content">
<img id="phone" src="images/phone.png" />
<img id="tablet" src="images/tablet.png" />
<img id="desktop" src="images/desktop.png" />
</div>

不需要媒体查询的手机CSS。是img#手机让它工作:

img#phone {
display: block;
margin: 6em auto 0 auto;
width: 70%;
}


img#tablet {display: none;}
img#desktop {display: none;}

平板css:

@media only screen and (min-width: 641px) {
img#phone {display: none;}


img#tablet {
display: block;
margin: 6em auto 0 auto;
width: 70%;
}
}

和桌面css:

@media only screen and (min-width: 1141px) {
img#tablet {display: none;}


img#desktop {
display: block;
margin: 6em auto 0 auto;
width: 80%;
}
}

祝你好运，并让我知道它是如何为你工作的。

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

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

尽管有媒体查询的变通方法，但它只在图像被设置为CSS背景时才有用。

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

那就是<picture>标记。

下面是中数对它的描述:

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内容。

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

桌面浏览器

移动浏览器

关于浏览器支持的更多信息，可以在我可以用中找到。

好的是html5please的句子指向用它作为后备。我个人打算采纳他们的建议。

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

picture元素与外观相似的video和audio元素略有不同。虽然它们都包含source元素，但当元素嵌套在picture元素中时，源元素的src属性没有意义，而且资源选择算法不同。同样，picture元素本身也不显示任何内容;它只是为其包含的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>标记，即使在桌面屏幕上也会显示实际的图像不会(所以你肯定需要一个填充备份)。

嗨，伙计们，我也在与同样的问题作斗争，如何不在移动设备上加载图像。

但我想到了一个好办法。首先创建一个img标签，然后在src属性中加载一个空白的svg。现在，您可以将图像的URL设置为内联样式的content: URL('链接到您的图像');。现在用你选择的包装包装你的img标签。

<div class="test">
<img src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/‌​svg%22/%3E" style="content:url('https://blog.prepscholar.com/hubfs/body_testinprogress.gif?t=1495225010554')">
</div>


@media only screen and (max-width: 800px) {
.test{
display: none;
}
}

将包装器设置为在不希望加载图像的断点上不显示任何内容。img标记的内联css现在被忽略，因为包装器中没有显示的元素的样式将被忽略，因此图像不会被加载，直到到达包装器有显示块的断点。

好了，在移动断点上不加载img的简单方法:)

检查这个代码依赖，以获得一个工作示例:http://codepen.io/fennefoss/pen/jmXjvo

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

div元素将负载的背景图像如果div被设置为'display:none'。

无论如何，如果同一个div有一个父元素，并且父元素被设置为'display:none'，则子元素不会加载. xml的背景图像。：）

使用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>

** __abc0 **

在正常情况下，display: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

浏览器似乎仍然下载图像，即使后者直接或间接隐藏display: none属性。

我发现，防止这种情况发生的唯一标准方法是使用img标签的loading属性:

<img src="https://cdn.test/img.jpg" loading="lazy">

除了Safari和Firefox Android，所有最新的浏览器都支持它。

MDN img元素规范。