zoukankan      html  css  js  c++  java

  • 下拉加载的实现

    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. }  
  • 相关阅读:
    关于Android中的三级缓存
    Android中的自定义控件（二）
    Android中的自定义控件（一）
    安卓四大组件之内容提供者
    实施面试题
    实施相关资料
    短路运算符
    第二章SQL映射文件
    第一章 初始MyBatis
    周测
  • 原文地址：https://www.cnblogs.com/web-wjg/p/7350518.html
Copyright © 2011-2022 走看看