banner图加速加载的方法

如题。

        相信我们很多的网站的首页都会有首页的banner图。这个图的特点没有别的，就是大。我们这些菜鸟的做法，就是直接按照下面的方法去处理：

HTML：

<div class="banner">
     <img class="banner-img" src="banner-img"/>
</div>

CSS:

.banner{
     width:100%;
     height:auto;
}
.banner-img{
      width:100%;
      height:auto;
      display:block;/*处理IE中图片下方的空白*/
      border:none;/*处理IE中图片边框问题*/
}

这个解决方案能够完美的解决我们的banner图的实现要求。但是，这种情况的缺点就是每一次都是直接加载我们的整张banner图，但是，由于我们为了使得我们的banner在用户的屏幕宽度无论变化的时候都能够适配，所以，宽度会做得很大。这样子整张的banner图的size就会很夸张。当页面内部的图片比较多的时候，可能会导致整张banner图都无法正常显示。

然后我们参考了taobao天猫家的banner图的制作方法，也就是，如下：

他的做法是将他切成三张图：分别如下：

然后处理的结构如下：

HTML：

<!--首页banner图-->
<div class="banner">
    <div class="banner-img">
        <img src="../res/bannerMid1-906-234.jpg" />
        <img src="../res/bannerMid2-906-281.jpg" />
    </div>
</div>

CSS：

.banner{
	background:url(backgroundWholeBack-1500-515.jpg) center top no-repeat;
	width:100%;
	height:auto;
	margin:0 auto;
	overflow:hidden;
}
.banner img{
	width:907px;
	display:block;
	border:none;
}
.banner-img{
	width:907px;
	height:auto;
	margin:0 auto;
	position:relative;
	right:4px;
}

淘宝就是通过这种切图的方法来优化首页banner图的加载，使得banner在加载的时候不会因为一些网络的问题而导致丢失。同时也让banner图能够实现一种随着用户的浏览效果而居中的效果。

这个过程可能会遇到一个小问题,也即是，我们使用了margin:0 auto，使得我们的banner盒子居中，然后内部的banner-img也是居中的，但是在实际使用过程中会有3个像素左右的偏差，所以我使用了position：relative，通过了right来移动，最终完美实现了类似淘宝的banner图的加载效果。