“display：none”是否阻止加载图像？

每个响应式网站开发教程建议使用display:none CSS属性来隐藏在移动浏览器上加载的内容，以便网站加载更快。 这是真的吗？ display:none不加载的图像，还是仍然加载移动浏览器的内容？ 有没有办法阻止在移动浏览器上加载不必要的内容？

Answer 1

这些图像被加载。 由于脚本动态检查DOM元素的可能性，浏览器不会优化元素（或元素内容）。

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

该图像具有display:none样式，但其大小由脚本读取。 您也可以通过查看浏览器开发人员工具的“网络”选项卡进行检查。

请注意，如果浏览器是在一个小型的CPU电脑上，不必渲染图像（和布局的页面）将使整个渲染操作更快，但我怀疑这是今天真正有意义的事情。

如果你想防止加载图像，你可能不会将IMG元素添加到文档中（或将IMG src属性设置为"data:"或"about:blank" ）。

编辑：

浏览器变得更聪明。 今天你的浏览器（取决于版本）可能会跳过图像加载，如果它可以确定它没有用。

Answer 2

如果你把这个图像变成CSS中div的背景图像，当div被设置为“display：none”时，图像将不会被加载。 当禁用CSS时，它仍然不会加载，因为CSS被禁用。

Answer 3

答案并不像简单的是或否。 看看我最近做的一个测试的结果：

• 在Chrome浏览器中：全部8个屏幕截图 – *图片加载（img 1）
• 在Firefox中：只加载当前正在显示的1个screenshot- *图像（img 2）

所以进一步挖掘后，我发现这一点 ，这解释了每个浏览器如何处理基于CSS显示加载img资产：none;

摘自博文：

• Chrome和Safari（WebKit）：
  除了通过不匹配的媒体查询应用后台以外，WebKit每次都会下载文件。
• 火狐：
  如果样式被隐藏，Firefox将不会下载使用背景图片调用的图片，但是它们仍然会从img标签下载资源。
• 歌剧：
  像Firefox一样，Opera不会加载无用的背景图像。
• IE浏览器：
  IE浏览器就像WebKit一样会下载背景图片，即使它们显示：无; 有些奇怪的东西出现在IE6中：具有背景图像和显示的元素：没有设置内联不会被下载…但是，如果这些样式不是内联应用的话。

Answer 4

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

如果你不想加载，留下一个DIV为空的地方，你可以在那里加载html到以后包含一个<img>标签。

尝试使用前面提到的萤火虫或wireshark，你会看到即使display:none文件也会被传送display:none 。

Opera是唯一的浏览器，如果显示器设置为none，则不会加载图像。 Opera现在已经转移到webkit，并将呈现所有图像，即使他们的显示设置为无。

这里是一个测试页面，将证明它：

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

Answer 5

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

当图像display: none或者在display:none ，浏览器可能会选择不下载图像，直到display设置为其他值。

当您将display切换为block时，只有Opera下载图像。 所有其他浏览器立即下载。

Answer 6

如果您将图像作为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"> 

图像将只在与可见lg块连接的媒体查询被触发时被加载，并且显示：none被改变为显示：块。 透明png用于允许浏览器在流体设计（height：auto; width：100％）中为<img>块（因此背景图像）设置合适的高度：宽度比。

 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！

Answer 7

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>支持：

桌面浏览器

移动浏览器

有关浏览器支持的更多信息，请参阅“ 我可以使用” 。

好的是， html5please的句子是使用它的后备 。 我个人打算采取他们的建议。

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

picture元素与类似的video和audio元素有所不同。 虽然它们都包含source元素，但当元素嵌套在picture元中时，源元素的src属性没有意义，而资源选择算法也不同。 同样， picture元素本身不显示任何东西; 它仅仅为其包含的img元素提供一个上下文，使其能够从多个URL中进行选择。

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

无论如何，你仍然可以尝试做一个狡猾的黑客隐藏在小设备上的形象：

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

因此，浏览器将不会显示图像，只会下载1×1像素图像，如果您多次使用该图像，可以将其缓存。 总之不建议这样做，因为如果标签不被支持，即使桌面浏览器也只显示1x1px的图片。

Answer 8

要防止获取资源，请使用Web组件的<template>元素 。

Answer 9

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

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

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

Answer 10

如果有，有没有办法在手机浏览器上加载不必要的内容？

使用<img srcset>

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

Answer 11

使用@media查询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来显示和隐藏显示/可见性/不透明度，但图像仍在加载，这是我们提出的最安全的代码。

Answer 12

嗨，大家好，我一直在努力解决同样的问题，如何不在手机上加载图像。

但我想出了一个好的解决方案。 首先制作一个img标签，然后在src属性中加载一个空白的svg。 现在，您可以将您的网址设置为图片的内嵌样式，其中包含：url（'链接到您的图片'）; 现在，将您的img标签封装在您选择的包装中。

 <div class="test"> <img src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/‌​svg%22/%3E" style="content:url('hubfs/body_testinprogress.gif')"> </div> @media only screen and (max-width: 800px) { .test{ display: none; } } 

将包装器设置为在不要加载图像的断点上不显示任何内容。 img标签的内联css现在被忽略了，因为包装在一个包含无显示的包装中的元素的样式将被忽略，因此图像不会被加载，直到到达包装具有显示块的断点。

你去，真的很简单的方法不要加载一个IMG的移动断点:)

看看这个codepen，一个工作的例子： http ://codepen.io/fennefoss/pen/jmXjvo

Answer 13

我们正在谈论的图片不能在手机上加载，对不对？ 所以如果你只是做了@media（min-width：400px）{background-image：thing.jpg}

是不是只能在一定的屏幕宽度以上才能看到图像呢？

Answer 14

使用display：none与图像的技巧是给他们分配一个id。 这是没有太多的代码需要使其工作。 这里是一个使用媒体查询和3个样式表的例子。 一个用于手机，一个用于平板电脑，另一个用于桌面。 我有3个图像，手机图像，平板电脑和桌面。 在手机屏幕上只会显示手机的图像，平板电脑将仅显示平板电脑图像，桌面电脑图像上会显示桌面。 这是一个代码示例，使其工作：

源代码：

 <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%; } } 

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

Answer 15

如果父div被设置为“display：none”，图像将不会被加载。

由于几乎所有的网站都通过隐藏父div来实现响应功能，这可能是您正在寻找的答案。

检查出来 – http://jsfiddle.net/v8eu39fL/1/

 <div style="display:none;"><img src=http://dystroy.org/stripad/icon-v1.png id="test"></div> alert("image width: " + $('#test').width()); 

在FF，Chrome，IE测试。

编辑：无论如何，浏览器下载图像，现在我看到连接在网络选项卡：/