当图片被CSS隐藏时，如何防止其下载

Question

6

我正在进行一些关于如何防止在CSS隐藏时下载图像资源的测试。

一些测试结果让我感到困惑，我正在寻求帮助找出原因。

假设有一个要隐藏的

。

案例1： background-image 和 display:none; 都被设置到了 <div> 元素中。

>> 图像被下载

案例2： background-image 被设置到了 <div> 元素中，而 display:none; 被设置到了其父元素中。

>> 图像未被下载

据我所知，设置display:none;会从渲染树中删除元素。因此，我想知道在情况1下下载图像是否是正确的行为，我觉得不应该下载。

Chrome的工作方式与FF不同，在这两种情况下都不会下载图像。

我一直在搜索，但我找不到令人满意的答案，解释为什么Chrome会以这种方式工作。

我附上了一些我参考的文章。

欢迎提出任何意见 :)

- Kei Park

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TheQueenOfCSS · Answer 1

有趣...

顺便说一下，display none 不会从渲染树中删除元素，因此 :nth-child() 仍然会在渲染树中计算这些 display none 元素。

我猜测 Chrome 只是不会进入那些元素。