篱栅图片展示：延迟加载+ajax-AJAX教程-爱易网页

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

日期：2014-05-16　浏览次数：20714 次

栅栏图片展示：延迟加载+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-shad

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

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

相关资料更多>

推荐阅读更多>