您的位置：首页 > Web前端 > JQuery

Jquery实现滚动到底部加载更多（最原始）

2016-12-18 16:46 337 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航