乐闻世界logo
搜索文章和话题

CSS 的 display:none 是否阻止 image 的加载？

CSS前端
1 年前提问
6 个月前修改
浏览次数112次

7个答案

1
2
3
4
5
6
7

在CSS中，display: none用于隐藏元素，但它不会阻止浏览器下载背景图像。例如，如果你在一个div元素上使用display: none样式，并且这个div有一个CSS背景图像，那么浏览器仍然会下载这个图像，尽管它在视觉上是不可见的。

但是，如果我们谈论的是<img>标签中的图像，使用display: none会有所不同。对于<img>标签，大多数现代浏览器会优化加载过程，如果图像使用display: none进行了隐藏，浏览器可能会推迟图像的加载，或者在图像不会对用户可见的情况下完全不加载它。

这种行为并不是在所有浏览器中都是一样的，也可能随着浏览器的更新而变化。一般来说，如果确实希望防止图像加载，最好的做法是不要在HTML代码中包含该图像。如果需要在用户交互之后加载图像，可以采取动态插入图像标签的方法或使用JavaScript按需加载。

要举一个例子，假设有一个网页，其中包含以下HTML和CSS代码：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Loading Example</title>
<style>
.hidden {
  display: none;
}
</style>
</head>
<body>

<img src="example.jpg" alt="Example Image" class="hidden">

</body>
</html>

在上述代码中，即使.hidden类应用了display: none，某些浏览器可能仍然会下载example.jpg图像。但如果你打算确保图像不被预加载，你可以通过JavaScript动态设置图像的src属性来控制加载：

javascript
document.addEventListener('DOMContentLoaded', function() {
  // 假设用户执行了某个操作，例如点击按钮
  document.getElementById('loadImageButton').addEventListener('click', function() {
    var img = document.getElementById('exampleImage');
    img.src = 'example.jpg';
    img.classList.remove('hidden');
  });
});

在这个例子中，只有在用户点击了一个按钮之后，图像才会被加载，因此在页面初始加载时，example.jpg并不会被下载。

2024年6月29日 12:07 回复

浏览器变得越来越智能。今天，如果您的浏览器（取决于版本）确定图像没有用，可能会跳过图像加载。

图像具有display:none样式，但其大小可以由脚本读取。如果父级隐藏，Chrome v68.0 不会加载图像。

您可以在那里查看： http: //jsfiddle.net/tnk3j08s/

您还可以通过查看浏览器开发人员工具的“网络”选项卡来检查它。

请注意，如果浏览器位于小型 CPU 计算机上，则不必渲染图像（并布局页面）将使整个渲染操作更快，但我怀疑这在今天是否真正有意义。

如果您想阻止图像加载，您可以简单地不将 IMG 元素添加到文档中（或将 IMGsrc属性设置为"data:"或"about:blank"）。

如果图像位于第一个屏幕上且未延迟加载，“display: none”将不起作用。图像将加载但不显示。

2024年6月29日 12:07 回复

如果您在 CSS 中将图像设置为 div 的背景图像，则当该 div 设置为“display: none”时，图像将不会加载。当 CSS 被禁用时，它仍然不会加载，因为 CSS 被禁用了。

2024年6月29日 12:07 回复

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

  • 在 Chrome 中：已加载所有 8 个屏幕截图-* 图像 (img 1)
  • 在 Firefox 中：仅加载当前显示的 1 个屏幕截图-* 图像 (img 2)

因此，在进一步挖掘之后，我发现了这个，它解释了每个浏览器如何处理基于 css display: none; 加载 img 资源。

博客文章摘录：

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

Chrome-全部 8 张屏幕截图-* 图像已加载

Firefox - 仅加载当前显示的 1 个屏幕截图 -* 图像

2024年6月29日 12:07 回复

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

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

尽管有媒体查询解决方法，但只有当图像在 CSS 中设置为背景时它才有用。

虽然我认为只有一个 JS 解决方案可以解决这个问题（延迟加载、图片填充等），但似乎有一个很好的纯 HTML 解决方案，可以随 HTML5 一起使用。

这就是<picture>标签。

MDN是这样描述的：

HTML元素是一个容器，用于指定其中包含的特定<picture><source>多个元素。<img>浏览器将根据页面的当前布局（图像将出现的框的约束）和将显示图像的设备（例如普通或 hiDPI 设备）来选择最合适的源。

使用方法如下：

shell
<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源元素的属性没有任何意义，并且资源选择算法不同。同样，元素本身不显示任何内容；它只是为其包含的元素提供上下文，使其能够从多个 URL 中进行选择。src``picture``picture``img

所以它的意思是，它只是通过为图像提供一些上下文来帮助您提高加载图像时的性能。

你仍然可以使用一些 CSS 魔法来隐藏小型设备上的图像：

shell
<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>浏览器不支持该标签，即使在桌面屏幕上也_不会_显示实际图像（因此您肯定需要在那里进行填充备份）。

2024年6月29日 12:07 回复

2023 年更新：

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

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

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

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

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

2024年6月29日 12:07 回复

在CSS中，display: none用于隐藏元素，但它不会阻止浏览器下载背景图像。例如，如果你在一个 div元素上使用 display: none样式，并且这个 div有一个CSS背景图像，那么浏览器仍然会下载这个图像，尽管它在视觉上是不可见的。

但是，如果我们谈论的是 <img>标签中的图像，使用 display: none会有所不同。对于 <img>标签，大多数现代浏览器会优化加载过程，如果图像使用 display: none进行了隐藏，浏览器可能会推迟图像的加载，或者在图像不会对用户可见的情况下完全不加载它。

这种行为并不是在所有浏览器中都是一样的，也可能随着浏览器的更新而变化。一般来说，如果确实希望防止图像加载，最好的做法是不要在HTML代码中包含该图像。如果需要在用户交互之后加载图像，可以采取动态插入图像标签的方法或使用JavaScript按需加载。

要举一个例子，假设有一个网页，其中包含以下HTML和CSS代码：

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Loading Example</title>
<style>
.hidden {
  display: none;
}
</style>
</head>
<body>

<img src="https://cdn.portal.levenx.com/levenx-world/3hQQtcQif-8j446Z.jpg" alt="Example Image" class="hidden">

</body>
</html>

在上述代码中，即使 .hidden类应用了 display: none，某些浏览器可能仍然会下载 example.jpg图像。但如果你打算确保图像不被预加载，你可以通过JavaScript动态设置图像的 src属性来控制加载：

javascript
document.addEventListener('DOMContentLoaded', function() {
  // 假设用户执行了某个操作，例如点击按钮
  document.getElementById('loadImageButton').addEventListener('click', function() {
    var img = document.getElementById('exampleImage');
    img.src = 'example.jpg';
    img.classList.remove('hidden');
  });
});
2024年6月29日 12:07 回复

你的答案