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

【问题标题】：Bootstrap 3 will a hidden div still load the imagesBootstrap 3 将隐藏的 div 仍然加载图像
【发布时间】：2014-08-14 21:57:07
【问题描述】：

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

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

我可以通过执行以下操作使引导程序仅显示正确的图像：

<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 张图片，还是只下载底部的一张？确保它只下载正确的最佳做法是什么？

非常感谢您一如既往的帮助。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

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

我发现 1.5x Hack 在大多数用例中都非常有效：

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

【讨论】：

PS：如果你想测试四个图像是否都被加载，请使用 Chrome 开发工具中的 Network Tab。
一篇很有意思的文章

【解决方案2】：

看看“responsiveimages.org”，因为他们正试图解决这个问题，正确的解决方案比破解更好。回答有点晚了，但由于我试图解决同样的问题，我想我会发布我正在做的事情:-)

【讨论】：

那么，你知道这个修复支持什么样的跨浏览器兼容性吗？我找不到信息，因为使用响应式图像或 ricg 搜索任何内容都会返回不相关的结果
非常酷，但也很少支持浏览器，尤其是对于旧版本。 IE中的零支持。不过我很期待这个。