响应式设计 - 媒体查询 - 如何不加载某些图像

Posted 2023-03-06

【中文标题】响应式设计 - 媒体查询 - 如何不加载某些图像

【英文标题】：Responsive design - Media Queries - How not to load certain images

【发布时间】：2011-11-15 04:08:36

【问题描述】：

好的，所以我使用媒体查询和display: none; 设计了一个响应式布局，它不显示非常小的屏幕尺寸的图像。

到目前为止一切顺利。但这些图像仍会在这些设备上下载，从而导致带宽增加。

使这些图像无法在指定设备上下载的正确方法是什么？

任何回复将不胜感激！

【问题讨论】：

如果你不能只是有一个不同的标记设置，我会有一个 mobile.site.com 或 www.site.com/mobile 集中点并做一些事情来删除或替换（用空白或空文件引用）所有IMG src 属性（...或完全删除元素...）。或者通过服务器上的脚本传递所有图像文件请求，并设置一个COOKIE 或SESSION 标志来告诉脚本它是否是移动的，然后发送文件内容或空响应。类似的东西。不过，我不知道你可以用纯 CSS 做到这一点。

【参考方案1】：

目前唯一可行的解​​决方案是使用 <noscript> 标签包装图像，然后稍后使用 javascript 将图像拉出。 Cookie 不适用于首页加载 (htmlPreloadScanner)，也与 CDN。如果您的图像并不总是 100% 的视口，浏览器嗅探将毫无用处。

Slimmage.js implements context-friendly responsive images in 3KB of vanilla JS.

标记也很简单：

<noscript data-slimmage>
  <img src="http://z.zr.io/ri/1s.jpg?width=150" />
</noscript>

当然，您可以创建一个服务器端助手来将其抽象出来。

【参考方案2】：

如果您在使用其他 javascript 时没有任何问题，那么您可以尝试THIS。我在搜索和学习媒体查询时偶然发现了它。

【参考方案3】：

如果您不介意 javascript 依赖项，您可以检查 window.innerWidth 并为足够大的屏幕插入图像标签。

只有在启用了 javascript 并且窗口足够大时才会请求图像。

【参考方案4】：

我能想到的两个选项：

使用浏览器嗅探检测服务器上的小型设备，并向它们发送不引用图像的不同 HTML。 使用background-image 或:before/:after 和content（IE 6 或 7 不支持）通过 CSS 而不是 HTML 显示图像（在 style 属性中），并包装该 CSS 代码在媒体查询中，以便它仅由具有更大屏幕的设备显示。

【讨论】：

#2 通常是一个很好的解决方案，遗憾的是在这种情况下它对我不起作用

@Illes：当然，这并不总是一个好主意。我认为你会坚持为小屏幕客户端提供不同的 HTML——我不相信浏览器让 HTML 作者控制何时下载图像资产。不过，希望 Stack Overflow 上的其他人对此有所了解。

2 是一个不错的选择，因为