当父母被隐藏并且孩子的css被阅读时防止下载背景图像

Question

正如我们已知的那样，为防止加载元素background-image，必须使用display:none隐藏其父级。

此方法适用于FF和Chrome。

在Chrome上使用jquery .child（.css()）方法读取任何getComputedStyle div css属性时，图片将开始下载。 元素仍然是隐藏的，所以它不应该。 Firefox没有下载。

我也在Safari 5.1上测试了它，它也一样，它开始下载图像，所以可能是webkit浏览器的行为：（

我创建了测试用例：http://jsfiddle.net/zxLyttc3/1/embedded/result/

1. 以chrome格式打开
2. 打开开发人员工具并转到网络标签
3. 重新加载页面，因为您可以看到没有example_image.png文件，因此未加载背景图像
4. 点击一个按钮，它只会从.child元素
中读取css宽度值
5. example_image.png开始下载

有没有人知道任何（hacky）解决方案来读取css值但阻止下载background-image？

我正在考虑将background-image存储在其他css属性中，例如counter-reset，请参阅此处“custom-css-properties-why-not”，但每当我的css类更改为更新时，它都需要运行js循环{元素上的{1}}样式。

Answer 1

您可以在background-image可见的同时动态设置.parent。