<!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