"display:none"会阻止图像加载吗？

Question

每个响应式网站开发教程都建议使用display:noneCSS属性隐藏在移动浏览器上加载的内容,以便网站加载速度更快.这是真的吗？难道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 display:none的加载img资产的问题.

摘自博客文章:

• Chrome和Safari(WebKit):
  WebKit每次都会下载文件,除非通过不匹配的媒体查询应用背景.
• Firefox:
  如果样式被隐藏,Firefox将不会下载使用背景图像调用的图像,但它们仍将从img标签下载资源.
• Opera:
  像Firefox一样,Opera不会加载无用的背景图像.
• Internet Explorer:
  IE,就像WebKit会下载背景图像,即使它们有display:none; IE6中出现奇怪的东西:带有背景图像和显示的元素:没有设置内联将不会被下载...但是如果这些样式不是内联应用的话,它们将是.

Answer 4

2023 年更新：

\n

display: none不，但是loading=lazy确实！

\n

即使图像直接或间接被display:\xc2\xa0none属性隐藏，浏览器仍然会下载图像。防止这种情况发生的唯一标准方法是使用loading="lazy"：

\n

<img src="https://cdn.example/image.jpg" loading="lazy">\n

\n

\n

推迟加载图像，直到达到浏览器定义的距视口的计算距离。\n 目的是避免\n处理图像所需的网络和存储带宽，直到\n合理确定需要该图像为止。在大多数典型用例中，这通常会提高\n内容的性能。

\n

\n

所有最新的桌面和移动网络浏览器都支持它。

\n

Answer 5

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

显然,浏览器的行为在过去5年中没有太大变化,许多人仍然会下载隐藏的图像,即使它们上面有display: none属性集.

即使有媒体查询解决方法,它也只有在将图像设置为CSS中的背景时才有用.

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

这就是<picture>标签.

以下是MDN对其的描述:

的HTML <picture>元素是用于指定多个容器<source>为特定的元素<img>载于它.浏览器将根据页面的当前布局(图像将出现的框的约束条件)和将显示的设备(例如普通或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元素,src但当元素嵌套在元素中时,源元素的属性没有意义picture,并且资源选择算法不同.同样,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>浏览器不支持该标签,即使在descktop屏幕上也不会显示实际图像(因此您肯定需要在那里进行polyfill备份).

Answer 6

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

如果您不想加载它,请将DIV留空,以便稍后可以在其中加载包含<img>标记的html .

如前所述,尝试使用firebug或wireshark,即使display:none存在,也会看到文件被转移.

如果显示器设置为none,Opera是唯一不会加载图像的浏览器.Opera现在已经转移到webkit,即使显示设置为none,也会渲染所有图像.

这是一个测试页面,将证明它:

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

Answer 7

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

当图像具有display: none或在元素内时 display:none,浏览器可以选择不下载图像,直到将display 其设置为另一个值.

切换display到时,只有Opera下载图像block.所有其他浏览器立即下载它.

Answer 8

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

Answer 9

如果可以的话，有没有办法在移动浏览器上不加载不必要的内容？

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

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

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

Answer 10

** 2019年答案 **

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

Answer 11

如果在 CSS 中将图像设为 div 的背景图像，当该 div 设置为“显示：无”时，图像将不会加载。

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

您可以为纯 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 用于允许浏览器在流体设计（高度：自动；宽度：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！