防止在隐藏父对象且读取子对象的 css 时下载背景图像
Prevent downloading background-image when parent is hidden and css of child is read
我们已经知道要防止加载元素 background-image 它的父元素必须使用 display:none 隐藏。
此方法在 FF 和 Chrome 上效果很好。
在 Chrome 当你使用 jquery .css() 阅读任何 .child div css 属性 (getComputedStyle) 方法，图像将开始下载。
元素仍然是隐藏的，所以它不应该。
Firefox 未下载。
我也在Safari 5.1上测试过，一样，开始下载图片，所以可能是webkit浏览器行为:(
我创建了测试用例：http://jsfiddle.net/zxLyttc3/1/embedded/result/
- 在 chrome
中打开它
- 打开开发人员工具并转到“网络”选项卡，
- 重新加载页面，如您所见，没有
example_image.png 文件，因此未加载背景图像
- 单击一个按钮，它将简单地从
.child 元素中读取 css 宽度值
example_image.png 开始下载
有没有人知道读取 css 值但阻止下载 background-image 的任何（hacky）解决方案？
我正在考虑将 background-image 存储在其他 css 属性 中，例如 counter-reset，请参阅此处“custom-css-properties-why-not”，但它需要 运行 每次当我的 css 类 更改以更新元素上的 background-image 样式时，js 循环。
您可以在使 .parent 可见的同时动态设置 background-image。
我们已经知道要防止加载元素 background-image 它的父元素必须使用 display:none 隐藏。
此方法在 FF 和 Chrome 上效果很好。
在 Chrome 当你使用 jquery .css() 阅读任何 .child div css 属性 (getComputedStyle) 方法，图像将开始下载。
元素仍然是隐藏的，所以它不应该。
Firefox 未下载。
我也在Safari 5.1上测试过，一样，开始下载图片，所以可能是webkit浏览器行为:(
我创建了测试用例：http://jsfiddle.net/zxLyttc3/1/embedded/result/
- 在 chrome 中打开它
- 打开开发人员工具并转到“网络”选项卡，
- 重新加载页面，如您所见，没有
example_image.png文件，因此未加载背景图像 - 单击一个按钮，它将简单地从
.child元素中读取 css 宽度值 example_image.png开始下载
有没有人知道读取 css 值但阻止下载 background-image 的任何（hacky）解决方案？
我正在考虑将 background-image 存储在其他 css 属性 中，例如 counter-reset，请参阅此处“custom-css-properties-why-not”，但它需要 运行 每次当我的 css 类 更改以更新元素上的 background-image 样式时，js 循环。
您可以在使 .parent 可见的同时动态设置 background-image。