我正在为电子邮件订阅表单构建一个带有 CSS 和 Javascript 的模态窗口/叠加层。
我的计划是在访问者访问网站但没有设置 cookie 时显示模态框。然后我在他们提交表单或单击模态窗口上的关闭按钮时设置该 cookie。因此，如果 cookie 存在，那么在重复访问时，他们将不必看到它。
模态窗口有一个大约 75kb 的背景图像，所以我试图提出最佳解决方案，以避免用户在设置 cookie 时加载此图像（我意识到它可能会被 tis 阶段缓存）
所以我的问题是，在具有背景图像集的类/id 的 CSS 文件中，如果该类/id 具有设置为隐藏display: none; 的属性，它还会下载图像吗？
【问题讨论】：
标签： css
要直接回答您的问题，是的，至少对于 Chrome（可能因浏览器而异）。
我使用 jsfiddle 进行了测试并查看了网络选项卡
HTML：
<div id="test"><img src="http://images.google.com/images/nav_logo107.png"></img></div>
CSS：
#test { display:none }
【讨论】：
确保图片已下载。
如果使用会怎样
可见性：隐藏；
并将元素的大小临时调整为 0x0.....
当现在需要该元素时......
再次将可见性设置为
可见性：可见；
然后将其调整为真实大小...
使用可见性属性...
就像躲在隐形斗篷上...
但你是否还在那里，并没有消失……
或使用 javascript 预加载它
if (document.images){
preload_image_object = new Image();
image_url = new Array();
image_url[2] = "image.jpg";
image_url[3] = "imag2.jpg";
var i = 0;for(i=0; i<=3; i++)
preload_image_object.src = image_url[i];
}
【讨论】：