Jquery實現滾動到底部加載更多(最原始)


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM