Jquery实现滚动到底部加载更多(最原始)

全屏阅读
  • 基本信息
  • 作者:
  • 作者已发布:925篇文章
  • 发布时间:2021年04月28日 17:32:54
  • 所属分类:html, javascript
  • 阅读次数:2030次阅读
  • 标签:
<!DOCTYPE html>
<html>
    <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></div>
     <div 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>

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!