页面的下拉加载效果基于ajax加载数据

来源：互联网发布：阿里java工资水平编辑：程序博客网时间：2024/05/17 04:38

准备一个静态的html文件，不用多说，head区域引入下jquery

<!DOCTYPE html><html><head><meta charset="utf-8"><title>下拉加载</title><script src="jquery.js"></script></head><body><div id="container">下拉加载<br/><!-- 复制上方文字,直到有滚动条出现为止,为了达到测试目的 --></div></body></html><script>//数据加载时期的gif加载图,用于提示用户数据正在加载!var loadDiv = '<div class="loading"><img src="loading.gif" width="100px" height="100px" ></div>';//监听窗口的鼠标滚轮事件$(window).scroll(function() {  //当滚轮滚动到文档最末位，也就是拉到了最底下if( $(window).scrollTop() == $(document).height() - $(window).height() ) {    //避免多次滚轮触发事件造成图片的多次追加，加上此判断    if($('#container .loading').length == 0) {        //将图片插入到内部的内容最末位        $('#container').append(loadDiv);    }    //发送ajax请求获取数据    $.ajax({        type: "POST",        url: "load.php",        success: function(data){          //加载成功,移除用于提示用户的动态gif图片          $('#container .loading').remove();          //追加后端返回的数据          $('#container').append(data);        }    });}});</script>

PHP代码如下：

<?phpif(isset($_POST)) {    //为了避免gif图因数据加载过快而破坏测试效果,脚本延时5秒返回    sleep(5);    echo <<<STR        加载成功！<br/>STR;}

2 0