篱栅图片展示：延迟加载+ajax _Ajax

栅栏图片展示：延迟加载+ajax
本文介绍了一个类似百度图片的图片展示页面。
鼠标滚动时才加载图片，当鼠标滚动到页尾的时候，则ajax更多的图片。
ajax部分是我自己写的，我觉得好像对于浏览器的负担挺重的，我用IE6测试的时候，会发现加载得很慢，很卡。希望有大神可以指点一下，帮我优化一下我的AJAX.

以下代码是用了lazyload插件以及自己编写的一个ajax(当鼠标的位置到底部的时候，则加载更多的图片)

参考资料

lazyload官网http://appelsiini.net/projects/lazyload
JS获取鼠标位置参考http://www.neoease.com/get-cursor-position-with-javascript/
setTimeoutFun函数参考http://www.iteye.com/magazines/116-Web-Front-Performance-Best-Practice

index.php

<!DOCTYPE HTML>
<html>
<head>
<title>画廊</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<script src="js/Jquery-1.8.2min.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script>

$(document).ready(function(){
		bindImgEvent();//延迟加载
	
	var ajaxStatu=true;//ajax状态,防止鼠标滚动时，多次ajax
	$(document).mousemove( setTimeoutFun( function(e){
		if( ajaxStatu && checkMousePosition(e) ){//ajax更多图片
			ajaxStatu = false;
			var time = new Date().getTime();
			$.ajax({
				type:'POST',
				url:'ajaxPic.php?t='+time,
				dataType:'json',
				success:function(data){
					var html;
					for(var i in data){
						for(var j in data[i]){
							html +='<li class="coli"><div class="coliDiv"><a href="#"><img class="imgCon" data-original="images/'+data[i][j]['imgSrc']+'" src="images/loadPic.gif"/></a><div class="imgInfo"><a href="#" class="proName">'+data[i][j]['proName']+'</a><span class="tag"><span class="tagTitle">类别:</span><a href="#" class="tagCon">'+data[i][j]['tagCon']+'</a></span><div></div></li>';				
						}
						$('#picUl'+i).append(html);
						html='';
					}
					bindImgEvent();//为图片绑定延迟加载
					ajaxStatu = true;
				}
			});
		}
	}, 300) )
});

function setTimeoutFun( func, waitSec, immediate ){
	var timeout;
	return function(){
		var context = this, args = arguments;
		var later = function(){//倒计时结束，执行
			timeout = null;
			if( !immediate ){
				func.apply( context, args );//运行函数
			}
		}
		var callNow = immediate && !timeout; 
		clearTimeout( timeout );
		setTimeout( later, waitSec );
		if( callNow ){//倒计时还没结束，人为结束
			func.apply( context, args );
		}
	
	}
}

function bindImgEvent(){
	$(".imgCon").lazyload({//延迟加载
		effect : "fadeIn",
		threshold : 200,
		failure_limit : 100//图片不顺序排列,将 failurelimit 设为 100 令插件找到 100 个不在可见区域的图片是才停止搜索
	});
}

//检查鼠标的位置是否已经在页面底部
function checkMousePosition(ev){
	var pointY;			//鼠标的Y坐标
	var  pageHeight;	//页面的高度
	if(typeof window.pageYOffset != 'undefined'){
		pointY = window.pageYOffset;
	} else if(typeof document.documentElement != 'undefined'){
		pointY = document.documentElement.scrollTop;
	} else if(typeof document.body != 'undefined'){
		pointY = document.body.scrollTop;
	}
	pointY += ev.clientY;	// 加上鼠标在视窗中的位置

	if (window.innerHeight && window.scrollMaxY) {
		pageHeight = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){
		pageHeight = document.body.scrollHeight;
	} else {
		pageHeight = document.body.offsetHeight;
	}
	
	if(pageHeight-pointY>600){//鼠标的位置在离底部500px的上方
		return false;
	}else{
		return true;
	}
}
</script>
<style>
body{
	background:rgb(243,242,243);
}
*{
	font:12px '宋体';
	margin:0;
	padding:0;
}
#content{
	width:1250px !imporant;
	margin:0 auto;
	max-width:1250px;
	min-width:990px;
}
.column{
	float:left;
	position:relative;
	top:0px;
	width:234px;
	margin-right:15px;
	list-style:none;
	display:inline-block;
}
.coli{
	width:234px;
	position：relative;
	margin-bottom:15px;
	box-shadow:0 1px 2px 0 rgba(210, 210, 210, 0.31);
	-webkit-box-shadow: 0 1px 2px 0 rgba(180, 180, 180, 0.5);
	border-top: 1px solid rgb(238, 238, 238);
	height: auto!important;
	overflow:visible;
}
.coliDiv{
	display:block;
	background:#ffffff;
	padding:10px;
}
.coliDiv img{
	width:100%;
	max-width:100%;
	border:0px #fff;
}
.coliDiv img:hover{
	filter:opacity(70%);
	-webkit-filter:opacity(70%);
}
.imgInfo{
	width:100%;
	overflow:hidden;
	cursor:pointer;
	vertical-align:baseline;
	padding:12px 0 0 0;
	display:block;
	font-size:100%;
}
.imgInfo a{
	color:#000000;
	height:18px;
	line-height:18px;
	text-decoration:none;
}
.proName{
	display:block;
}
.tag{
	font-size: 14px;
	padding-top:5px;
}
.tagTitle{
	color: rgb(136, 136, 136);
}
.tagCon{
	background:rgb(244, 244, 244);
	display:inline-block;
	clear:left;
	padding:3px 5px;
	border-radius:5px;
}
a.tagCon:hover{
	background:rgb(228,70,54);
	color:#fff;
}
</style>
</head>

<body>


<div style="padding:20px;"></div>
<div id="content">
<ul>
<?php for($x=1; $x<6; $x++) {?>
	 <ul class="column" id="picUl<?php echo $x;?>"> 
	<?php	for($i=1; $i<101; $i++){?>
		<li class="coli">
			<div class="coliDiv">
				<a href="#"><img  class="imgCon" data-original="images/<?php echo ($i+$x)%2;?>.jpg" src="images/loadPic.gif"/></a>
				<div class='imgInfo'>
					<a href="#" class="proName">图片名称</a>
					<span class="tag">
						<span class="tagTitle">类别:</span>
						<a href='#' class="tagCon">动物</a>
					</span>
				<div>
			</div>
		</li>
	<?php } ?>
	</ul>
<?php } ?>
</div>


</body>

</html>

ajaxPic.php

<?php
$arr = array();
for($i=1; $i<6; $i++){
	for($j=1; $j<101; $j++){
		$arr[$i][] = array('imgSrc'=>'1.jpg', 'proName'=>iconv('gbk', 'UTF-8','ajax图片名称'), 'tagCon'=>iconv('gbk', 'UTF-8','ajax动物') );
	}
}
echo json_encode($arr);//json_encode,如果对象有中文，请记得把编码转为UTF8,要不然，json_encode就解析不了啦!  

?>

我上传了一个完整的包，最好在对HTML5以及CSS3支持得比较好的浏览器下运行咯。。。