0

我有一个网页，它使用了几个<img>默认情况下不可见的元素。

  • 图像用于轮播

  • 一些图像display: none通过 mobile.css 和 CSS 媒体查询设置为隐藏

浏览器，尤其是移动浏览器如何排队加载图像？是否可以对图像进行微调控制，以便

  • 图像在可见之前不会加载

  • 如果移动媒体查询启动，则 mobile.css 或伴随的 Javascript 中止图像加载

  • <img>CSS背景图像和元素图像行为方面的区别（如果有的话）

移动浏览器（WebKit）在这种情况下使用什么策略？

作为示例站点，我可以使用开源站点http://fi.pycon.org/2012/它有一个使用 HTML 和 CSS 创建的徽标元素

https://github.com/python-finland/fi.pycon.org/blob/master/2012/index.html#L85

这个元素默认是可见的（桌面）

https://github.com/python-finland/fi.pycon.org/blob/master/media/2012/css/theme.css#L99

但最终通过 mobile.css 和媒体查询对移动浏览器隐藏：

https://github.com/python-finland/fi.pycon.org/blob/master/media/2012/css/moobile.css#L20

  • 移动浏览器是否进行了优化，以便不加载徽标图像文件？

  • 如果将<img>元素用于徽标，情况会有所不同吗？

  • 覆盖 CSS 规则是否在不同的 CSS 文件（和媒体查询）中是否重要

注意：如何处理媒体查询超出了这个问题的范围，我对以不同方式构建基本 CSS 和媒体查询的答案不感兴趣。我很清楚这些解决方案。

4

1 回答 1

2

目前没有可行的标准化选项来防止 <img> 标记中的图像直接加载 HTML+CSS。这是W3C 响应式图像工作组成立的原因之一：

...没有提议的基于 CSS 的解决方案可以解决我们希望避免的基本 [原文如此] 问题之一：以更大的屏幕宽度下载多个资产，因为可以在应用交换逻辑之前提出请求。

这并不是说基于 JavaScript 的临时解决方案行不通，只是说纯基于 HTML+CSS 的解决方案行不通。所以，回答你的问题：

1. 移动浏览器是否优化，不加载标志图像文件？

不，隐藏元素 会加载它们的背景图像。

2. 如果使用元素作为标志，情况会有所不同吗？

不会。图像很可能会在应用 CSS 之前抢先加载。

3. 覆盖 CSS 规则是否在不同的 CSS 文件（和媒体查询）中是否重要

不会。这可能会导致答案 #2 中提到的交换逻辑的应用出现更多延迟，从而增加图像已经开始加载的可能性。

于 2012-09-11T11:45:54.570 回答