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

Question

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

到目前为止还不错。但这些图像仍然在这些设备上下载，导致带宽增加。

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

任何回应将不胜感激！

Answer 1

现在唯一的可访问解决方案是用<noscript>标签包装图像，然后用javascript拉出映像。 cookie不适用于第一页加载（htmlpreloadscanner），也不使用cdns工作。如果您的图像并不总是100％的视口，浏览器嗅探是无用的。

slimmage.js在vanilla js 的3kb中实现上下文友好的响应图像。

标记也很简单：

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

.

当然，您可以使服务器端助手甚至抽象出来。

Answer 2

我能想到的两个选择:

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

Answer 3

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

仅当启用javascript并且窗口足够大时才会请求图像。

Answer 4

如果使用其他JavaScript没有任何问题，则可以尝试这。在搜索和了解媒体查询时，我偶然发现了它。