下拉加载的实现

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. }
查看全文

相关阅读:
观《phonegap第三季 angularjs+ionic视频教程实时发布》学习笔记（一）
npm的本地模式与全局模式
 Nodejs的Express完成安装指导
 app安装位置声明
 vs2005水晶报表无法运行在X64机器上
 SQL递归查询(with cte as)
System.IO.File.Create 不会自动释放，一定要Dispose
imail 删除历史邮件命令
 Deferred解决JS同步问题
 HttpContext.Current.Cache使用文件依赖问题

原文地址：https://www.cnblogs.com/web-wjg/p/7350518.html