越来越多的网站实现了动态加载,瀑布型网站,QQ空间,sina等大型网站会性能和用户的体验越来越严格
减少服务器的负担,加快网站的浏览速度,都是网站技术人员人人在做的!下面是拉动浏览器滚动条才实现的加载代码
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var loaded = false;
function show(){
//lert("test");
var top = jQuery("#comments").offset().top;
if(!loaded && jQuery(window).scrollTop() + jQuery(window).height() > top ){
jQuery("#comments").html("加载中...");
$.ajax(
{//参数
type: "POST",
cache: false,
url: 'Default4.aspx',
data: "name=John&location=Boston",
success: function(data){
jQuery("#comments").before(data);
}
}
);
//alert("OK");
}
}
jQuery(window).scroll(show);
});
</script>
</head>
<body>
第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />第一屏的内容<br />
<div id="comments"></div>
底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />底部内容<br />
</body>
</html>