Question

我正在建立一个响应式网站，其中包含一个大型轮播，首页上有多个图像。

我想为每个设备制作不同尺寸的图像。我想确保只下载该设备的正确图像，以便为移动用户节省带宽。

我可以通过这样的方式让bootstrap显示正确的图像：

<img src=" http://placehold.it/1700x700" alt="Placeholder" class="visible-lg"/>
<img src=" http://placehold.it/1100x700" alt="Placeholder" class="visible-md"/>
<img src=" http://placehold.it/900x700" alt="Placeholder" class="visible-sm"/>
<img src=" http://placehold.it/768x700" alt="Placeholder" class="visible-xs"/>

如果我在xs设备上加载它，它还会下载所有4张图片，还是只下载最后一张图片？确保只下载正确的最佳做法是什么？

一如既往地感谢您的帮助。

Answer 1

您的示例将加载所有四个图像，这对移动设备用户来说是一个真正的痛苦（以及您服务器上的额外需求）。响应式图像是少数几个没有广泛认可的“最佳解决方案”的领域之一，大多数开发人员只会在需要答案时耸耸肩。

我发现 1.5x Hack 在大多数用例中运行良好：

http://alistapart.com/article/mo-pixels-mo-problems（最后，但值得一直阅读）。

Answer 2

看看“responsiveimages.org”，因为他们正试图解决这个问题，而且正确的解决方案比黑客更好。回答有点迟，但是因为我试图解决同样的问题，我以为我会发布我正在做的事情： - ）

Bootstrap 3将隐藏div仍然加载图像

2 个答案: