CSS显示无

Posted 2023-03-06

【中文标题】CSS显示无

【英文标题】：Css display none

【发布时间】：2013-06-10 04:59:20

【问题描述】：

如果我有一个 div，其中包含一些重载内容，例如一些大图片。如果该 div 在我的样式表中设置为不显示，我的网站是否会加载该 div 的内容，或者该 div 及其内容是否会被忽略且不加载？

【问题讨论】：

内容将被加载。

you may want to check this browser request trivia game out.

Does "display:none" prevent an image from loading?的可能重复

【参考方案1】：

它会被加载，如果你想要延迟加载尝试改变css背景属性以匹配另一个URL，那么它将被加载

Does "display:none" prevent an image from loading?

【参考方案2】：

是的，它仍然会被加载。 浏览器仍会加载设置为 display='none' 的 div 的任何内容的值，因为它是 html 代码的一部分。

如果您想避免在 html 中加载非常大的媒体，您应该使用 javascript 或 php 条件。

【参考方案3】：

根据Request Quest：

_{给看不懂图片的人}

<div style="display: none"><img src="img.png"></div>

以上是否会在以下任一情况下触发对 img.png 的请求：

Chrome、Safari、Firefox、IE

正确！该请求是在 Chrome、Safari、Firefox 和 IE 中发出的。

啊哈！是的，无论风格如何，浏览器都会下载图像，as per the spec。

这种行为是许多自适应图像的 JavaScript 实现的失败，因为在 JavaScript 可以跳转并更改 src 属性之前请求原始图像。