根据设备大小限制图像下载

Question

我们正在使用三个不同设备大小的图片。例如，mobile-banner.png、tablet-banner.png、desktop-banner.png具有相同的外观和感觉，但具有不同的大小和分辨率。我们是否可以根据设备的大小限制下载（不显示/隐藏）无关的图片？如果我们避免在桌面电脑上下载移动设备和平板电脑的图像，性能将大大提高。对于其他设备也是相同的方式。我发现即使在桌面上没有使用移动设备和平板电脑的图像，它们仍然会下载。请帮忙解决。

- Sahana

---

有几个解决方案。;) - Labu

请注意：图片应使用<img>标签，并且内容将来自CMS。因此，请勿使用媒体查询。有一个大型可编辑的图像列表从CMS动态呈现到页面中。每个图像都有移动设备、平板电脑和台式机/笔记本电脑的3组图像，这是客户的要求。 - Sahana

我指向了<img />标签的srcset属性 - 这是您现在可能会使用的：http://caniuse.com/#search=srcset - Labu

你说“设备的尺寸”，但实际上你需要考虑“手机、平板和台式机”。这是两个完全不同的东西。我可能拥有500mbps的连接速度，但分辨率却非常低。 - apokryfos

Answer 1

从这个问题中我理解的是您想要添加响应式行为。如果是这样，您可以使用jQuery限制图像大小。就像这样：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

if ( $(window).width() > 739) {      
  //Add your javascript for large screens here 
} 
else {
  //Add your javascript for small screens here 
}

- Manish Kakati

---

谢谢尝试：）但是我的要求不同。在开发者工具中，我可以看到所有3组设备类型的图像被下载，这会降低性能。另外，我不能避免使用3个图像，因为根据要求有轻微的形状变化，所以我不能调整大小，否则将破坏形状。这里的图像大小指磁盘上的大小，而不是图像的尺寸或分辨率。我只需要下载特定设备所需的图像，与其他设备相关的图像不应被下载。 - Sahana