CSS背景图像加载行为

Question

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

假设此元素显示在鼠标单击等事件上。浏览器是否会在元素显示之前加载这些图像？这种加载行为在浏览器中是否一致？

Answer 1

关于这个主题没有很多好消息，所以我使用a testpage by Steve Souders在webpagetest.org上做了一些测试。

事实证明，在所有测试的浏览器中，只有Firefox不会加载带有display：none 的背景图片。你可以see the test results on my blog here。

Answer 2

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

如果您确实要加载图片，请尝试使用可行的background-position: -1000px -1000px。它不会显示图像，但会预先加载。但是，元素将处于正常流程中，即不隐藏。

Answer 3

它不会自动加载，但您可以使用Javascript技巧来预加载图像。

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

作为更好的解决方案，您可以创建一个具有负定位值的div（例如left：-1000px）并将imagetoload.png指定给它的背景以加载图像。