7

Ok, So I designed a responsive layout that doesn't show images for very small screen sizes, using media queries and display: none;.

So far so good. But these images still download on these devices, causing an increase in bandwidth.

What is the proper way to make these images not download on the specified devices?

Any response would be much appreciated!

4

4 回答 4

3

我能想到的两个选择：

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

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

Slimmage.js 在 3KB 的 vanilla JS 中实现了上下文友好的响应式图像。

标记也很简单：

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

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

于 2013-07-08T17:14:34.313 回答
0

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

于 2012-08-12T17:25:06.130 回答
0

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

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

于 2011-10-05T22:22:43.820 回答