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

最新推荐文章于 2024-06-12 14:47:27 发布

konohanaruto

最新推荐文章于 2024-06-12 14:47:27 发布

阅读量8.3k

点赞数 3

分类专栏： php 文章标签： ajax 下拉加载页面延时加载 ajax加载

本文链接：https://blog.csdn.net/xiaoxiaodongxie/article/details/52411342

版权

php 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

准备一个静态的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代码如下：

<?php

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

konohanaruto

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
页面的下拉加载效果基于ajax加载数据

准备一个静态的html文件，不用多说，head区域引入下jquery下拉加载下拉加载//数据加载时期的gif加载图,用于提示用户数据正在加载!var loadDiv = '';//监听窗口的鼠标滚轮事件$(window).scroll(function() { //当滚轮滚动到文档最末位，也就是拉到了最底下 if( $(window).scrollTo
复制链接

扫一扫

专栏目录