Question

我想利用Bootstrap 3的响应式工具，只根据所用设备的大小加载某个图像：

<img src="http://bit.ly/12VMi5H" class="img-thumbnail visible-lg .hidden-print">
<img src="http://dell.to/12VMrWX" class="img-thumbnail visible-md .hidden-print">
<img src="http://bit.ly/12VMu55" class="img-thumbnail visible-sm .visible-print">

但是，我不想加载所有3张图片。我如何通过CSS或其他一些轻量级方法只为该设备加载适当的图像并进行屏幕显示？

Answer 1

如果您通过CSS加载图像作为背景图像，则可以通过适当的媒体查询控制加载的资源。与HTML不同，通过CSS加载图像只会根据视口加载适当的图像。您可以在每个断点处分配特定的背景图像。以下是基于BS 3.0的示例。

HTML：

   <div class="image-holder></div>

CSS：

@media (min-width: 768px) {

  .image-holder {
  background: #fff url(http://bit.ly/12VMu55) no-repeat ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
}

@media (min-width: 992px) {

  .image-holder {
  background: #fff url(http://dell.to/12VMrWX) no-repeat ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
}

@media (min-width: 1200px) {

  .image-holder {
  background: #fff url(http://bit.ly/12VMu55) no-repeat ; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  }
}

如果您想要另一个尺寸的图片仅用于移动设备，请将其放入css的主体中，因为BS是移动优先的。

Answer 2

有些javascript是另一种选择，如果出于任何原因你不想在CSS中加载background-image图像。此选项仅在需要时加载较大的文件（但无论如何总是加载最小的文件）：

HTML：

<img src="...example-image_small.jpg" />

使用Javascript：

if ($(window).width() > 767) {
    $("img[src$='_small.jpg']").each(function() {
        var new_src = $(this).attr("src").replace('_small', '_large'); 
        $(this).attr("src", new_src); 
    });
}

<强> Example

确保你有正确命名的图像文件（以_small和_large结尾）它应该全部到位。

仅加载将与响应式布局一起使用的图像

2 个答案: