JS图片预加载代码_图片特效特效

来自GOOGLE的图片预加载技术，也就是加载一个图片的时候，为了减轻网页的压力，将图片衰减后先显示出来，然后再慢慢加载，你就会看到一个图片由模糊突然变得清淅起来，这就是预加载的一种。这段代码就完成了图片的预加载功能，你可以点击一个小图然后看到大图慢慢变得清淅，直至加载完成。

<!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" mrc="text/html; charset=gb2312" />
<title>JS图片预加载</title>
<style type="text/css">

</style>
</head>
<body>
<div class="big-img"><img id="showImg" width="500" height="375" src="http://p1.mb5u.com/texiao/20110225160438118.jpg" alt="" /></div>
<ul id="imgList">
 <li><img src="http://p1.mb5u.com/texiao/20110225160438118.jpg" /></li>
 <li><img src="http://p1.mb5u.com/texiao/1/20110225160438116.jpg" /></li>
 <li><img src="http://p1.mb5u.com/texiao/1/20110225160438117.jpg" /></li>
</ul>
<script type="text/javascript">
	var imgL=document.getElementById("imgList").getElementsByTagName("img");
	var imgURL="/jscss/demoimg/";
	var bigImg=new Array("wall5.jpg","wall6.jpg","wall7.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>

所属频道：图片特效特效/更新时间：2012-12-11

[收藏][报错][返回列表]

JS图片预加载代码_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些