如果我们使用 display:none; 隐藏了一些东西;例如:图像,渲染引擎还会下载吗?如果是,这是否意味着在移动设备上打开同一个网页时,下载会不必要地增加重量?
这可能进一步意味着为移动设备修改相同的网页可能不是一个好主意。请指教。谢谢。
如果我们使用 display:none; 隐藏了一些东西;例如:图像,渲染引擎还会下载吗?如果是,这是否意味着在移动设备上打开同一个网页时,下载会不必要地增加重量?
这可能进一步意味着为移动设备修改相同的网页可能不是一个好主意。请指教。谢谢。
是的,整个页面被下载(隐藏元素和所有)。display:none
在页面被浏览器的 CSS 引擎处理之前,这是没有意义的。
有几种方法可以停止下载图像,无论图像是内联图像还是 CSS 样式中的背景图像,或者它是通过媒体查询引入的。它适用于几乎所有的移动设备(除了“Fennec 10.0+”是唯一仍然下载图像的设备。请参阅 Tim Kadle 的测试结果)
Tim Kadlec 的“媒体查询和资产下载测试结果”研究位于:
http://timkadlec.com/2012/04/media-query-asset-downloading-results/
它说,对于背景图像,隐藏父元素。如果您不能这样做,则使用媒体查询将背景图像设置为仅在屏幕或设备大小为特定大小时下载。只需通过放入媒体查询来定义您想要隐藏/不下载的内容。是不是很奇妙。
还有另一个出色的测试,非常简单,位于: http ://timkadlec.com/mq/test4.php
在此测试中,您只需调整浏览器窗口的大小以模仿“桌面”或“移动”,以查看它是否正在下载与媒体查询相关的图像。您只需单击要测试的每个场景的链接。