图片响应式（数据绑定在标签上）

1. 大屏加载大图，小屏加载小图

• 目的

  • 各种终端都需要正常显示图片
  • 移动端应该使用更小的图片

• 思路：

  • 将元素中直接设置的图片背景删除，换成两个data-属性（如：data-img-sm="小图路径"，data-img-lg="大图路径"）
  • 通过JS的方式获取屏幕的宽度；
  • 判断屏幕宽度是否小于一定的值（如：768px）；
  • 根据判断情况决定使用具体的大图还是小图；

2. 介绍 数据绑定到标签
   data()的用法 : http://www.w3school.com.cn/jquery/data_jquery_data.asp

3. jquery each 函数的用法：http://www.w3school.com.cn/jquery/traversing_each.asp

    $(selector).each(function(index,element))
   

4. 思路的具体扩展

   • 现在div标签上绑定两个data-属性（如：data-img-sm="小图路径"，data-img-lg="大图路径"）

   • 文档加载完毕时，监听屏幕尺寸的变化

   • 获取屏幕的尺寸

   • 先拿到图片所装的盒子的所有item

   • 通过each遍历获取各个标签item

   • 将各个标签item从js对象转换为jQ对象，方便后面使用data方法

   • 通过判断是大图还是小图来获取图片的路径（使用data方法获取路径）
     var imgSrc = isSmImg ? $item.data('sm-img'):$item.data('lg-img');

   • 如果是小图的时候，为了避免重叠干扰，先清空item中的节点
     $item.empty();

   • 再创建img标签
     var img = $('');

   • 再将其添加在父元素item上
     $item.prepend(img);

   • 如果是大图的时候，先清空item中的节点，再设置背景图片
     var src = 'url("'+ imgUrl +'")';
     $item.css({
     backgroundImage:src
     });