编程
您现在的位置:首页 >> 编程

JS图片预加载

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>JS图片预加载</title>

<style type="text/css">

<!--

body{background:#000; color:#FFFFFF;  }

.big-img{height: 390px; text-align:center;  }

ol,ul{list-style:none}

ul{width: 632px; height: 56px; margin:10px auto;  }

li{float:left;  width: 200px; height: 53px; margin-right:10px; }

ul li img{ cursor:pointer}

-->

</style>

</head>

<body>

<div class="big-img"><img id="showImg" width="500" height="375" src="tool/ExamplePic/example5.jpg" alt="" /></div>

<ul id="imgList">

 <li><img src="tool/ExamplePic/example5.jpg" /></li>

 <li><img src="tool/ExamplePic/example6.jpg" /></li>

 <li><img src="tool/ExamplePic/example7.jpg" /></li>

</ul>

<script type="text/javascript">

var imgL=document.getElementById("imgList").getElementsByTagName("img");

var imgURL="tool/ExamplePic/";

var bigImg=new Array("example5.jpg","example6.jpg","example7.jpg");

var imgshow=new Image();

for (var i = 0; i < imgL.length; i++) {

    (function() {

        var p = i

        imgL[i].onclick = function() {

            document.getElementById("showImg").src = this.src;

            imgshow.src = imgURL + bigImg[p];

            imgshow.onload = function() {

                document.getElementById("showImg").src = this.src;

            }

        }

    })()

}

</script>

</body>

</html>