“display：none”会阻止图像加载吗？

Question

每个响应式网站开发教程都建议使用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）

因此，在进一步深入挖掘之后，我找到了this，它解释了每个浏览器如何根据css display：none;

处理加载img资产的方法

摘自博客文章：

  

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

Answer 4

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

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

即使有media queries解决方法，但只有在将图像设置为CSS中的背景时，它才有用。

虽然我认为只有解决问题的JS解决方案（lazy load，picturefill等），但似乎有一个很好的纯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>标记的网址内容。

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

在有人退出之前，当前浏览器支持<picture>：

桌面浏览器

移动浏览器

有关您可以在Can I use上找到的浏览器支持的更多信息。

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

有关您可以在W3C's specification中找到的标记的更多信息。那里有一个免责声明，我觉得很重要：

  

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屏幕上也会显示实际图像赢得（因此您绝对会知道）需要在那里备份填充物。）

Answer 5

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

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

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

如果显示设置为none，Opera是唯一不会加载图像的浏览器。 Opera现在已移至webkit，即使显示设置为none，也会渲染所有图像。 / p>

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

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

Answer 6

Quirks Mode: images and display: none

  

当图片具有display: none或位于元素内部时   display:none，浏览器可能会选择不下载图片，直到display   设置为另一个值。

     

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

Answer 7

div元素的背景图片将加载如果div设置为＆＃39; display：none＆＃39;。

无论如何，如果同一个div有一个父级并且该父级设置为＆＃39; display：none＆＃39;，则子元素的背景图像将不会加载。 ：）

使用bootstrap的示例：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 8

  

如果有，有办法不在移动设备上加载不必要的内容   浏览器？

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

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

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

Answer 9

If you make the image a background-image of a div in CSS, when that div is set to 'display: none', the image will not load.

扩大布伦特的解决方案。

对于纯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用于允许浏览器为＆lt; img＆gt;设置适当的高度：宽度比率。流体设计中的块（以及背景图像）（高度：自动;宽度：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！

Answer 10

要阻止获取资源，请使用setCoordinates。

Answer 11

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

不会。如果您考虑手机用户带宽节省，图像将照常加载并仍将使用用户的带宽。您可以做的是使用媒体查询并过滤您希望图像的设备您的图像必须设置为div等的背景图像而不是标记，因为无论屏幕大小和媒体查询集如何，图像标记都会加载图像。

Answer 13

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

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

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

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

MDN img element specification。

Answer 14

另一种可能性是使用<noscript>标记并将图像放在<noscript>标记内。然后在需要图片时使用javascript删除noscript标记。通过这种方式，您可以使用渐进增强功能按需加载图像。

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

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

Answer 15

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

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

但我找到了一个很好的解决方案。首先制作一个img标签，然后在src属性中加载一个空白svg。现在，您可以将图像的URL设置为带内容的内联样式：url（'link to your image'）;.现在将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;
      }
    }

将包装器设置为在您不想加载图像的断点处显示none。 img标记的内联css现在被忽略，因为包含在display none中的包装元素的样式将被忽略，因此图像不会被加载，直到你到达包装器有显示块的断点。

你去，非常简单的方法是不在移动断点上加载img：）

查看此codepen，以获取一个工作示例：http://codepen.io/fennefoss/pen/jmXjvo

Answer 17

我们谈论的是没有在手机上加载的图片，对吗？那么如果你刚刚做了@media（min-width：400px）{background-image：thing.jpg}

那么它不会只在某个屏幕宽度以上寻找图像吗？

Answer 18

使用display：none with images的技巧是为它们分配一个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 #phone让它发挥作用：

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

祝你好运，让我知道它对你有用。