下拉加载的实现

HTML

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8">  
  5. <title>下拉加载</title>  
  6. <script src="jquery.js"></script>  
  7. </head>  
  8. <body>  
  9. <div id="container">  
  10. 下拉加载<br/>  
  11. <!-- 复制上方文字,直到有滚动条出现为止,为了达到测试目的 -->  
  12. </div>  
  13. </body>  
  14. </html>  
  15. <script>  
  16. //数据加载时期的gif加载图,用于提示用户数据正在加载!  
  17. var loadDiv = '<div class="loading"><img src="loading.gif" width="100px" height="100px" ></div>';  
  18. //监听窗口的鼠标滚轮事件  
  19. $(window).scroll(function() {  
  20.   //当滚轮滚动到文档最末位，也就是拉到了最底下  
  21.     if( $(window).scrollTop() == $(document).height() - $(window).height() ) {  
  22.         //避免多次滚轮触发事件造成图片的多次追加，加上此判断  
  23.         if($('#container .loading').length == 0) {  
  24.             //将图片插入到内部的内容最末位  
  25.             $('#container').append(loadDiv);  
  26.         }  
  27.         //发送ajax请求获取数据  
  28.         $.ajax({  
  29.             type: "POST",  
  30.             url: "load.php",  
  31.             success: function(data){  
  32.               //加载成功,移除用于提示用户的动态gif图片  
  33.               $('#container .loading').remove();  
  34.               //追加后端返回的数据  
  35.               $('#container').append(data);  
  36.             }  
  37.         });  
  38.     }  
  39. });  
  40. </script>  

PHP

  1. <?php  
  2. if(isset($_POST)) {  
  3. //为了避免gif图因数据加载过快而破坏测试效果,脚本延时5秒返回  
  4.     sleep(5);  
  5. echo <<<STR  
  6.         加载成功！<br/>  
  7. STR;  
  8. }  
posted @ 2017-08-12 15:48  web_study  阅读(3627)  评论(0)  编辑  收藏  举报

哈哈