bootstrap轮播图改进（如何避免资源浪费）
我们用bootstrap轮播图框架如下
<!-- start轮播图 -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" data-small-img="img/banner/b_1_640x263.png" data-lg-img="img/banner/b_1_1920x570.png">
<!-- pc端 -->
<!-- <a href="#" class="hidden-xs"><img src="img/banner/b_1_1920x570.png" alt="..."></a> -->
<!-- 移动端 -->
<!-- <a href="#" class="hidden-sm hidden-md hidden-lg phone_pic"><img src="img/banner/b_1_640x263.png" alt="..."></a> -->
</div>
<div class="item" data-small-img="img/banner/b_2_640x263.png" data-lg-img="img/banner/b_2_1920x570.png">
<!-- pc端 -->
<!-- <a href="#" class="hidden-xs"><img src="img/banner/b_2_1920x570.png" alt="..."></a> -->
<!-- 移动端 -->
<!-- <a href="#" class="hidden-sm hidden-md hidden-lg phone_pic"><img src="img/banner/b_2_640x263.png" alt="..."></a> -->
</div>
<div class="item" data-small-img="img/banner/b_3_640x263.png" data-lg-img="img/banner/b_3_1920x570.png">
<!-- pc端 -->
<!-- <a href="#" class="hidden-xs"><img src="img/banner/b_3_1920x570.png" alt="..."></a> -->
<!-- 移动端 -->
<!-- <a href="#" class="hidden-sm hidden-md hidden-lg phone_pic"><img src="img/banner/b_3_640x263.png" alt="..."></a> -->
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end轮播图 -->
我上面写的pc端和移动端部分就是根据屏幕大小自动响应式展示不同得图片，其实这样就已经实现了轮播图在不同尺寸屏幕得切换了
但问题是，通过bootstrap响应式工具，虽然可以根据不同屏幕尺寸进行展示对应得轮播图图片，实际上是请求了两次（即pc端图片和移动端图片都请求了，只是根据屏幕进行隐藏了而已）这也会造成浪费。如何改进能让浏览器在不同尺寸时候访问对应尺寸得图片，而不是全部访问呢？这就需要将原来item标签改进为紫色部分得样子，使用H5自定义标签。之后配合jquery实现。
//[2]根据屏幕大小自己定显示响应内容 用jq实现，减少资源请求
$(function() {
//先获取所有得item
var itemlist = $('.carousel-inner .item');
//监听屏幕大小得改变
$(window).on('resize', function(){
//获取当前屏幕得宽度
var width = $(window).width();
// console.log(width);
if (width >= 768) {
//遍历元素
$(itemlist).each(function(index, value){
var item = $(this);
// console.log(1);
//获取当前自定义属性中存储得路径
var lgimg = item.data('lg-img');
// console.log(lgimg);
//创建元素
var a = $("<a class='picImg' href='javascript:;'><img src="+lgimg+"></a>");
item.html(a);
});
} else {
//遍历元素
$(itemlist).each(function(index, value){
var item = $(this);
//获取当前自定义属性中存储的图片路径
var smImgSrc = item.data('small-img');
//创建元素
var a = $("<a class='mobileImg' href='javascript:;'><img src=" + smImgSrc + "></a>");
item.html(a);
})
}
}).trigger('resize');
})