js图片延时加载（jquery特效）

javascript特效学习笔记 js+css特效 jquery jquery特效 js图片延时加载

前段时间朋友说让给做一个js延时加载图片人功能，原来也的网上见过这些，但是没有具体的研究。今天学习了下，发出来和大家一直分享。至于延时加载的好处我在这里就不说了，好多朋友都说可以减少服务器短时间的请求数量。

一、原理分析

1.可显示区域的的图片正常显示，不可显示的不去请求，

2.当滚动滚动条时，计算可显示的图片，把图片的src的真实路径写入。

二、代码

这里我用的是jquery来做的，当然大家如果明白了原理，用什么做都可以做出很不错的效果。

下面看代码

<!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" />

<script src="http://suiyidian.cn/texiao/jquery-1.3.1.js" type="text/javascript"></script>
<title>js图片延时加载特效</title>


<script type="text/javascript">

$(function(){
	
	
	var d = new Array();
for (i = 0; i < $("img").length; i++) {

	d[i] = $("img").eq(i).attr("name");

}



for (i = 0; i < $("img").length; i++) {

	if ($("img").eq(i).offset().top > document.documentElement.clientHeight + $(window).scrollTop()) {

		$("img").eq(i).attr("src", "hc.gif");

	} else {

		$("img").eq(i).attr("src", d[i]);
	}

}


$(window).scroll(function() {



	for (i = 0; i < $("img").length; i++) {

		if ($("img").eq(i).offset().top > document.documentElement.clientHeight + $(window).scrollTop()) {

			$("img").eq(i).attr("src", "hc.gif");

		} else {

			$("img").eq(i).attr("src", d[i]);
		}

	}


})
	
	
	})
</script>
</head>
<body>
<img name="http://hj.bbs.nen.com.cn/attachments/10063010304e0ab3ca1c10b81c.jpg" src="hc.gif"  />
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<img name="http://bbs.525j.com.cn/upload/uploadfile/2005-9/200592922650386.jpg" src="hc.gif"  />
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<img name="http://t1.baidu.com/it/u=2163784586,126657670&fm=52&gp=0.jpg" src="hc.gif"  />
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<img name="http://img.beihai365.com/bbs/forumid_15/05_J6Zq8zZBI0B0.jpg" src="hc.gif"  />
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<img name="http://img2.goodcar.cn/forums/day_091120/0911201518e2c7308bcb46f6f4.jpg" src="hc.gif"  />
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/>
<img name="http://upload.m4.cn/2011/0117/1295232215918.jpg" src="hc.gif"  />
</body>
</html>

这上面是代码，大家可以细细的研究一下，

DEMO效果

本文由 kevin 创作，采用知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。