为什么我的图片比进度条快一步？进度条加载完毕后就自己消失了，图片一开始就显示在页面中
<!DOCTYPE html>
<html>
<head>
<title>定位在头部的进度条</title>
<meta charset="utf-8">
<style>
.loading{
width:100%;
height:100%;
position:fixed;
left:0;
height:0;
background-color:#fff;
z-index:100;
}
.loading .pic{
width:0%;
height:5px;
position:absolute;
top:0;
left:0;
background:#F33;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<header>
<img src="http://hbimg.b0.upaiyun.com/828e72e2855b51a005732f4e007c58c92417a61e1bcb1-61VzNc_fw658" alt="" />
<img src="http://img3.duitang.com/uploads/item/201412/24/20141224010926_crKEt.thumb.700_0.jpeg" alt="" />
</header>
<script>
$('.loading .pic').animate({width:'10%'},100);
</script>
<section class="banner">
<img src="http://pic51.nipic.com/file/20141031/8098773_204507657000_2.jpg" alt="" />
</section>
<script>
$('.loading .pic').animate({width:'20%'},100);
</script>
<section class="about">
<img src="http://taobao.90sheji.com/58pic/11/95/44/52R58PIC2fS.jpg" alt="" /><br/>
</section>
<script>
$('.loading .pic').animate({width:'40%'},100);
</script>
<section class="pro">
<img src="http://img2.imgtn.bdimg.com/it/u=3744459268,1899024290&fm=26&gp=0.jpg" alt="" />
</section>
<script>
$('.loading .pic').animate({width:'60%'},100);
</script>
<section class="news">
<img src="http://b-ssl.duitang.com/uploads/item/201303/01/20130301125234_eTRwn.jpeg" alt="" />
</section>
<script>
$('.loading .pic').animate({width:'80%'},100);
</script>
<footer>
<img src="http://img3.duitang.com/uploads/item/201412/24/20141224010926_crKEt.thumb.700_0.jpeg" alt="" />
</footer>
<script>
$('.loading .pic').animate({width:'100%'},100,function(){
$('.loading').fadeOut();
});
</script>
</body>
</html>
