Question

我很难缠住这个quiz question：

页面加载时，mypic.jpg将被浏览器下载吗？

#test1 {
    display: none;
}
#test2 {
    background-image: url('http://www.dumpaday.com/wp-content/uploads/2017/01/random-pictures-116.jpg');
    visibility: hidden;
}

<div id="test1">
    <span id="test2"></span>
</div>

答案是否定的。这是为什么？尝试以上操作不会加载图像。但是加载会在我切换到display: block;

时发生

使用隐藏的可见性保留具有元素空间的东西吗？

我也感到困惑，因为上一个问题说display: none确实加载了背景图片，尽管在这种情况下没有隐藏的后代，并且此thread讨论了浏览器越来越智能并防止了加载。真相在哪里？

Answer 1

所以我发现这很有趣，因为我对此一无所知。可以断定，如果该项或其父项设置之一为display: none，则不会加载图片。是因为浏览器变得更聪明？我不这么认为。我尝试了以下方法：

#test1 {
    display: none;
}

<div id="test1">
   <img src="http://www.dumpaday.com/wp-content/uploads/2017/01/random-pictures-116.jpg"/>
</div>

在开发人员工具的“网络”选项卡中，您可以看到图像已加载。因此，它与您的示例不同。我的想法是display: none不会绘制元素（事实），因此不会对自身或其子元素（思想）应用任何样式。 基本上不会执行background-image: url('...');，因为不需要将样式应用于此元素，因为它不会绘制。

我希望这可以帮助您理解：）

为什么“ display：none”不加载背景图片？

1 个答案: