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   id="p5lnfrh"   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訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些