<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>滚动条到底部时自己加载新的内容</title>
<script type=‘text/javascript‘ src=‘js/jquery.js‘></script>
<script type="text/javascript">
var page_num=2;
$(document).ready(function(){
$(window).scroll(function(){
if($(document).scrollTop()>=$(document).height()-$(window).height()){
var div1tem = $(‘#container‘).height()
var str =‘‘
$.ajax({
type:"GET",
url:‘ajaxdata‘,
dataType:‘json‘,
beforeSend:function(){
$(‘.ajax_loading‘).show() //显示加载时候的提示
},
success:function(ret){
$(".after_div").before(ret) //将ajxa请求的数据追加到内容里面
$(‘.ajax_loading‘).hide() //请求成功,隐藏加载提示
}
})
}
})
})
</script>
{/literal}
</head>
<body>
<div>
<div style=‘width:100%;height:1200px‘>文章内容</div>
<div class=‘after_div‘></div>
<div class=‘ajax_loading‘ style=‘background:#F0F0F0;height:60px;width:100%;text-align:center;line-height:60px;font-size:18px;display:none;position:fixed;bottom:0px‘><img src="img/loadinfo.net.gif"> 数据加载中</div>
</div>
</body>
</html>
参考：http://www.oschina.net/code/snippet_1042544_20893
时间： 2024-12-25 14:59:45