滚动条到底部时自己加载新的内容

最新推荐文章于 2024-05-07 01:04:58 发布

moqiang02

最新推荐文章于 2024-05-07 01:04:58 发布

阅读量2.6k

点赞数

分类专栏： JS+JQuery

JS+JQuery 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

方案一：

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="gb2312">
      <title>滚动条到底部时自己加载新的内容</title>
      <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.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.php',
                    dataType:'json',
                    beforeSend:function(){
                      $('.ajax_loading').show() //显示加载时候的提示
                    },
                    success:function(ret){
                     $(".after_div").before(ret) //将ajxa请求的数据追加到内容里面
                     $('.ajax_loading').hide() //请求成功,隐藏加载提示
                    }
                })
              }
            })
          })
       </script>
    </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>

方案二：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery实现当拉动滚动条到底部加载数据</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}
a{color:#444;text-decoration: none;}
a:hover{color:#065BC2;text-decoration: none;}
.clear{clear:both;}
img{border:none;vertical-align: middle;}
ul{list-style: none;}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var totalheight = 0;
 
function loadData()
{
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
 
    if ($(document).height() <= totalheight)
    {
        //加载数据
        $("#container").append($(document).scrollTop()+"<br/>");
    }
}
 
$(window).scroll( function() {
    console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());
    console.log("页面的文档高度 ："+$(document).height());
    console.log('浏览器的高度：'+$(window).height());
    loadData();
});
</script>
</head>
<body>
    <div id="container">
        dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
    </div>
</body>
</html>

moqiang02

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
滚动条到底部时自己加载新的内容

滚动条到底部时自己加载新的内容 var page_num=2; $(document).ready(function(){ $(window).scroll(function(){ if($(document).scrollTop()>=$(document).height()-
复制链接

扫一扫