栅栏图片展示：延迟加载+ajax
本文介绍了一个类似百度图片的图片展示页面。
鼠标滚动时才加载图片，当鼠标滚动到页尾的时候，则ajax更多的图片。
ajax部分是我自己写的，我觉得好像对于浏览器的负担挺重的，我用IE6测试的时候，会发现加载得很慢，很卡。希望有大神可以指点一下，帮我优化一下我的AJAX.
以下代码是用了lazyload插件以及自己编写的一个ajax(当鼠标的位置到底部的时候，则加载更多的图片)
参考资料
index.php
ajaxPic.php
发现了lazyload.js的BUG
图片没有实现延迟加载。主要是在检测页面的位置的时候，用了$window.height(),返回的是window的整体高度，把它改为window.innerHeight就可以了。
我上传了一个完整的包，最好在对HTML5以及CSS3支持得比较好的浏览器下运行咯。。。
鼠标滚动时才加载图片，当鼠标滚动到页尾的时候，则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/739704
- 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就解析不了啦!
?>
发现了lazyload.js的BUG
图片没有实现延迟加载。主要是在检测页面的位置的时候，用了$window.height(),返回的是window的整体高度，把它改为window.innerHeight就可以了。
$.belowthefold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
//fold = $window.height() + $window.scrollTop();
fold = window.innerheight + $window.scrollTop();
} else {
//fold = $(settings.container).offset().top + $(settings.container).height();
fold = $(settings.container).offset().top + window.innerheight;
}
return fold <= $(element).offset().top - settings.threshold;
};
我上传了一个完整的包，最好在对HTML5以及CSS3支持得比较好的浏览器下运行咯。。。