本文介绍了一个类似百度图片的图片展示页面。
鼠标滚动时才加载图片，当鼠标滚动到页尾的时候，则ajax更多的图片。
ajax部分是我自己写的，我觉得好像对于浏览器的负担挺重的，我用IE6测试的时候，会发现加载得很慢，很卡。希望有大神可以指点一下，帮我优化一下我的AJAX.
以下代码是用了lazyload插件以及自己编写的一个ajax(当鼠标的位置到底部的时候，则加载更多的图片)
参考资料
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支持得比较好的浏览器下运行咯。。。
分享到：
相关推荐
* W + 数（0-宽为0.5米的围墙，1-栅栏，2-铁丝网，3-篱笆，4-活树篱笆，5-不依比例围墙，不拟合，6-不依比例围墙，拟合） 铁路类： * T + 数（0-标准铁路（大比例尺），1-标（小），2-窄轨铁路（大），3-窄（小）...
在提供的压缩包文件"凯撒+栅栏"中，可能包含了上述Python代码的实现，以及一些示例的加解密文本，帮助读者更好地理解这两种加密技术。通过学习这些代码，你可以自己动手实践，进一步熟悉Python编程和加密算法的运用...
栅栏密码的基本原理是将明文按照一定规则分割成多个部分，然后重新排列这些部分形成密文，以此来增加破解的难度。 加密过程通常涉及以下步骤： 1. **确定栅栏数量**：首先，我们需要选择一个栅栏的数量，这决定了...
基于Python实现一个能够对凯撒密码、维吉尼亚密码、栅栏密码、摩斯密码、Base64编码、Ascii编码、AES、DES、RSA、RC4的加密解密以及密文破解维吉尼亚密钥和明文的CTF Crypto工具
在实际应用中，栅栏密码可以通过多种方式进行变体，如使用多栏栅栏、改变栅栏的排列顺序或使用不规则的栅栏形状。这些变化增加了密码的复杂性，但也使得解密过程更加困难，需要知道正确的栅栏结构。 在提供的压缩包...
在描述中提到，该程序支持26栏以上的栅栏，这意味着它可以处理更复杂的加密，即使原文长度不是栏数的整数倍，也能有效处理。这种灵活性使得加密后的文本更难以被破解，因为不明确的栏数增加了猜测的难度。 在实际...
栅栏密码加密/解密算法传统型的栅栏密码加密/解密算法的变种，称为W型。网站有在线脚本，但在线下比赛时，会用到此脚本，自动分栏，比对结果
4. **防护装置**：规定了必要的防护设备，如防护栅栏、紧急停止按钮，以防止人员接触带电部件或在车辆运行时靠近危险区域。 5. **电磁兼容性（EMC）**：要求车辆在电磁环境中不会干扰其他设备，同时自身也能够抵抗...
此外，Fence还支持自定义栅栏背景，用户可以选择图片或者颜色来个性化自己的桌面环境，提升使用体验。 Fence的另一大亮点是其智能隐藏功能。当鼠标移出桌面区域或者双击桌面时，所有图标可以自动隐藏，只留下清爽的...
右键单击栅栏选择"删除栅栏"可以删除一个栅栏。快捷提示：为了使您的桌面不出现混乱, 双击桌面可以快速隐藏所有图标。再次双击桌面显示所有隐藏图标。按住键盘的WINDOWS图标键然后再按"D"键可以快速显示桌面。再次...
如真空吸尘器、地板抛光机、咖啡磨、食物混合器、液体混合器、搅拌器、榨汁机、钟、速度控制器、按摩设备、风扇、干发器、厨房抽油烟机、冷藏箱...、影像机、电栅栏、静电吸尘器、充电器、整流器、变换器、电子玩具等...
栅栏填充算法是一种在计算机图形学中常见的填充技术，它主要用于图像处理和二维图形的着色。这个算法的原理是沿着图形的边界进行扫描，并在内部进行颜色填充。在VC++环境中实现的栅栏填充算法源码，为学习和研究图形...
Linux内存栅栏概述 Linux内存栅栏概述 Linux内存栅栏概述
交互式应用程序通过使用长度为 10 的离散时间脉冲、离散时间傅里叶变换 (DTFT) 和在可选的零填充后计算的离散傅里叶变换 (DFT) 来说明 DFT 的栅栏效应。 （可能是零填充的）离散时间脉冲信号的 DFT 与其 DTFT 叠加，...
内存栅栏是一种指令，它强制在栅栏之前和之后的指令不发生交叉执行，保证特定操作的顺序，防止缓存的延迟效应。在.NET中，我们可以使用`Thread.MemoryBarrier()`方法来创建内存栅栏。在上述例子中，通过在 `_answer`...
1. **用户界面**：软件可能提供一个简洁的用户界面，允许用户输入明文信息，并选择栅栏的排列方式（例如，直线、Z形、S形等）。 2. **加密过程**：用户输入明文后，程序会根据选定的排列方式将文本切割，并沿指定...
栅栏加密代码的c++实现写的简单比较容易看也很容易学习
"可移动栅栏与栅栏导向装置间可滑动分离连接装置"是一种创新设计，旨在优化电信设备的安装、维护及安全防护。这种连接装置的设计考虑了灵活性和稳定性，使得在不影响设备正常运行的前提下，能够方便地进行设备的安装...