CSS背景图片加载行为

Question

假设对已设置的元素有一个css样式声明display:none（未在屏幕上显示）并且它也具有背景图像集。

可以说这个元素显示在一个事件上，比如点击鼠标。甚至在元素被显示之前浏览器会加载这些图像吗？这种负载行为在浏览器中是否一致？

Answer 1

不，我以前测试过的浏览器没有。

如果您确实想要加载图像，请尝试使用background-position: -1000px -1000px，该功能可以正常工作。它不会显示图像，但会被预加载。但是，元素将处于正常流程中，即不隐藏。

Answer 2

未自动加载，但可以使用JavaScript技巧预加载图像。

pic = new Image(); 
pic.src="http://url/imagetoload.png"; 

作为更好的解决方案，可以创建具有负定位值一个div（诸如左：-1000px）并分配imagetoload.png到它的背景加载图像。

Answer 3

关于此主题的信息不多，所以我使用a testpage by Steve Souders对webpagetest.org进行了一些测试。

事实证明的所有浏览器进行测试，仅Firefox不加载背景图像与显示：无。你可以see the test results on my blog here。