本文介绍了一个类似百度图片的图片展示页面。
鼠标滚动时才加载图片，当鼠标滚动到页尾的时候，则ajax更多的图片。
ajax部分是我自己写的，我觉得好像对于浏览器的负担挺重的，我用IE6测试的时候，会发现加载得很慢，很卡。希望有大神可以指点一下，帮我优化一下我的AJAX.
以下代码是用了lazyload插件以及自己编写的一个ajax(当鼠标的位置到底部的时候，则加载更多的图片)
参考资料
lazyload官网http://appelsiini.net/projects/lazyload JS获取鼠标位置参考http://www.neoease.com/get-cursor-position-with-javascript/http://mysougou.iteye.com/blog/739704setTimeoutFun函数参考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']+'/></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;?>"> <?phpfor($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/></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支持得比较好的浏览器下运行咯。。。