jQuery + Bootstrap Grid - 根据屏幕大小显示图像

Question

我有一个Web项目，我使用bootstrap的网格系统。在我当前的设置中，我使用col-xs-4显示3张图像，这样每行的任何屏幕尺寸都会显示3张图像。但是我现在想要它在屏幕尺寸变小时只显示1个图像。这是我的原始代码：

<div class="row">
  <div class="col-xs-4">
    <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png">
  </div>
  <div class="col-xs-4">
    <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png">
  </div>
  <div class="col-xs-4">
    <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png">
  </div>
</div>

期望输出：
桌面视图：

移动视图：

我知道我可以在屏幕大小低于特定断点时设置display to none，但我希望Web应用程序只加载1张图片以加快速度（仅使用display:none;仍将加载其他2张图片）

有任何建议如何做到这一点？
我的想法是使用jquery / javascript生成html页面。 以下是jsfiddle：https://jsfiddle.net/Lb92rv84/1/

Answer 1

我使用了问题中的html元素。

＆＃13;

＆＃13;

$(document).ready(function(){
  var width = $(window).width();
  var newdiv1 = $('<div class="col-xs-4"></div>');
  var image = '<img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png">';
  var el = newdiv1.append(image);
  
  if (width >= 768){
  	//html for screen wider than 768
  	el.appendTo('.target').clone().appendTo('.target').clone().appendTo('.target');
  }else{
  	//html for screen smaller than 768
  	el.appendTo('.target');
  }
})

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="target"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试为要隐藏的每个图像DIV分配自定义类：

<div class="row">
  <div class="col-xs-4 image-1">
    <I'm src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png">
  </div>
  <div class="col-xs-4 image-1">
    <img   src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png">
  </div>
  <div class="col-xs-4">
    <img src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png">
  </div>
</div>

然后在断点处：

.image-1 img{
  display:none;
 }  

这样您仍然可以将div用于其他内容并仅隐藏图像。