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

Question

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

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

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

非常感谢任何回应！

Answer 1

我能想到的两个选择：

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

Answer 2

目前唯一可访问的解决方案是使用<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>

当然，您可以创建一个服务器端帮助程序，甚至可以将其抽象出来。

Answer 3

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

只有在启用了javascript且窗口足够大的情况下才会请求图片。

Answer 4

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