我正在构建一个响应式网站,该网站的首页上有一个带有多个图像的大型轮播。
我想为每个设备制作不同尺寸的图像。我想确保只下载适合该设备的正确图像,以节省移动用户的带宽。
我可以通过执行以下操作使 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 张图片,还是只下载底部的一张?确保只下载正确内容的最佳做法是什么?
非常感谢您一如既往的帮助。
最佳答案
您的示例将加载所有四个图像,这对移动设备用户来说是一个真正的痛苦(并且对您的服务器有额外的要求)。响应式图像是少数几个没有得到广泛认可的“最佳解决方案”的领域之一,大多数开发人员在被要求回答时只会耸耸肩。
我发现 1.5x Hack 在大多数用例中都运行良好:
http://alistapart.com/article/mo-pixels-mo-problems (最后,但值得一读)。
关于html - Bootstrap 3 将隐藏的 div 仍然加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19662702/