下拉加载的实现

最新推荐文章于 2024-03-17 06:00:00 发布

weixin_30633405

最新推荐文章于 2024-03-17 06:00:00 发布

阅读量89

点赞数

文章标签： php 后端

原文链接：http://www.cnblogs.com/web-wjg/p/7350518.html

版权

HTML

<!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

转载于:https://www.cnblogs.com/web-wjg/p/7350518.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注