html - 当图像最终通过媒体查询隐藏时，延迟和手动控制 加载

Question

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

• 图像在轮播中使用

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

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

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

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

• CSS背景图片和<img>有什么区别？元素图片行为明智(如果有的话)

移动浏览器(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

• 是否优化了移动浏览器以便不加载 Logo 图像文件？

• 如果 <img> 情况会有所不同吗？元素用于 Logo ？

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

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

Answer 1

目前没有可行的标准化选项来防止 标签中的图像直接加载 HTML+CSS。这是 W3C Responsive Images working group 的原因之一。成立:

...no proposed CSS-based solution accounts for one of the fundimental [sic] issues that we’re looking to avoid: downloading multiple assets at larger screen widths, as requests can be made before the swapping logic is applied.

这并不是说基于 JavaScript 的临时解决方案行不通，只是说纯基于 HTML+CSS 的解决方案行不通。因此，回答您的问题:

1. Are mobile browsers optimized so that the logo image file is not loaded?

没有。 hidden elements will load他们的背景图片。

2. Would the case be different if element were used for the logo?

没有。图片很可能会先发制人地开始加载 before CSS is applied .

3. Does it matter if overriding CSS rules are in a different CSS file (and media query)

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