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

Posted 2023-03-06

【中文标题】根据设备的大小限制图像的下载

【英文标题】：Restricting the download of images depending on size of the device

【发布时间】：2017-07-02 16:11:27

【问题描述】：

我们正在为 3 种不同的设备使用 3 种尺寸的图像。例如，mobile-banner.png、tablet-banner.png、desktop-banner.png 具有相同的外观和感觉；但有不同的尺寸和分辨率。我们可以根据设备的大小限制不相关图像的下载（不显示/隐藏）吗？如果我们避免为桌面下载手机和平板电脑图像，性能可以大大提高。其他设备的类似方式。即使在桌面中未使用它们（移动和平板电脑图像），我也可以看到图像被下载。请帮忙。

【问题讨论】：

有a few 解决方案。 ;)

注意：图片应使用 标签，内容来自 CMS。所以请不要媒体查询。来自 CMS 的大量可编辑图像列表动态呈现到页面中。每个图像有 3 组图像，用于移动设备、平板电脑和台式机/笔记本电脑，这是客户要求的

我指的是srcset 属性的<img /> 标签——这些天你可能会使用它：caniuse.com/#search=srcset

您说的是“设备大小”，但实际上您需要“移动设备、平板电脑和台式机”。两种不同的野兽。我可以有 500mbps 的连接和低得离谱的分辨率。

【参考方案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 

【讨论】：

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