什么都没显示，有图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>进度条2</title>
<style>
.loading {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: #fff;
}
.loading.pic {
width: 0%;
height: 5px;
position: absolute;
top: 0;
left: 0;
background-color: deeppink;
}
</style>
<script src="js/jquery-1.3.2.min.js"></script>
</head>
<body>
<div class="loading">
<div class="pic">
</div>
</div>
<header>
<img src="img/2.jpg" alt="" />
</header>
<script>
$(".loading.pic").animate({
width: "30%"
}, 100)
</script>
<section class="banner">
<img src="img/3.jpg" alt="" />
<img src="img/4.jpg" alt="" />
</section>
<script>
$(".loading.pic").animate({
width: "50%"
}, 100)
</script>
<section class="about">
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" /></section>
<script>
$(".loading.pic").animate({
width: "70%"
}, 100)
</script>
<section class="pro">
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt="" />
</section>
<script>
$(".loading.pic").animate({
width: "80%"
}, 100)
</script>
<section class="news">
<img src="img/5.jpg" alt="" />
<img src="img/6.jpg" alt="" />
</section>
<script>
$(".loading.pic").animate({
width: "90%"
}, 100)
</script>
<footer>
<img src="img/7.jpg" alt="" />
<img src="img/8.jpg" alt="" />
</footer>
<script>
$(".loading.pic").animate({
width: "100%"
}, 100, function() {
$(".loading").fadeOut();
})
</script>
</body>
</html>
