<html> <head> <meta charset="gb18030" />
<script type="text/javascript" src="./js/jquery.js"></script>
<script>
var totalheight = 0;
function loadData(){
totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop());
if ($(document).height() <= totalheight) { // 说明滚动条已达底部
/*这里使用Ajax加载更多内容*/
var container = $("#container"); // 加载容器
var data = {}; // 查询参数
// 当前页
var currentPage = parseInt(container.find('#currentPage').val());
// 总页数
var maxPage = parseInt(container.find('#maxPage').val());
// 查询日期范围
var startDate = container.find('#startDate').val());
var endDate = container.find('#endDate').val());
data.currentPage = currentPage;
data.maxPage = maxPage;
data.startDate =startDate;
data.endDate = endDate;
jQuery.ajax({
type:"POST",
url: "/servlet/query.do",
data:data,
dataType: "json",
beforeSend: function(XMLHttpRequest){
$("#loading").css('display','');
}, success:function(response) {
if(response.data){
for(var i=0, length = response.data.length; i<length; i++){
var html = response.data[i];
var test = $(html);
container.append(test);
}
container.find('#currentPage').val(parseInt(currentPage)+1));
$("#loading").css('display','none');
}
}, error:function(){
alert("加载失败");
}
});
}
}
$(window).scroll( function() {
loadData();
});
</script>
</head>
<body>
<div id="container">
这里显示内容
</div>
<div id='loading'>
<img src="./imgs/loading.gif"/>
</div>
</body>
</html>
kt431128
- 浏览: 39166 次
- 性别:
- 来自: 北京
-
相关推荐
这种技术允许用户在浏览网页时无需点击分页按钮，只需将页面滚动到最底部，更多内容就会自动加载出来，提高了用户体验，特别是在内容丰富的网站如社交媒体、新闻聚合平台等。 ### 1. HTML5 HTML5是现代网页开发的...
在网页设计中，当用户滚动到页面底部时自动加载新的内容是一种常见的优化用户体验的技术，通常被称为“无限滚动”或“滚动加载”。这种技术在社交媒体网站如新浪微博、Facebook等广泛使用，因为它可以避免用户手动...
在网页设计中，"滚动条到底部弹出div"是一种常见的交互效果，它通常用于实现无限滚动、加载更多内容或显示底部菜单等场景。这个功能是通过JavaScript和CSS结合实现的，下面我们将详细探讨如何实现这个效果。 首先，...
在网页开发中，为了优化用户体验，常常需要在用户滚动到页面底部时自动加载更多的内容，这一功能被称为“无限滚动”或“滚动加载”。本篇文章将详细介绍如何使用JavaScript来实现这一功能，特别是当浏览器滚动条快到...
在网页开发中，有时我们需要实现一个功能，当用户滚动页面到底部时，自动加载更多内容，这被称为“无限滚动”或“滚动加载”。这个功能在社交媒体、新闻网站和电子商务平台等场景非常常见，能提高用户体验，减少用户...
在进行网页内容的展示时，常常会遇到大量内容需要分批次加载的情况，这时候就需要实现一个“滑动到页面底部自动加载更多内容”的功能。该功能可以有效改善用户阅读体验，避免一次性加载过多数据导致页面响应过慢的...
在前端开发中，有时我们需要实现一个功能，即在向某个特定的`div`容器内添加新内容后，使该`div`的滚动条自动滚动到最底部，以确保新添加的内容能够立即呈现在用户的视线范围内。本文将详细介绍三种实现这一目标的...
在这种情况下，用户每次只能看到一部分图片，当用户滚动到底部时，更多的图片会动态加载。这种方式可以减少初次加载时的数据量，改善页面的初始加载速度。 **异步加载图片**是指在用户滚动页面时，浏览器只加载可见...
8. **无限滚动**：这种滚动到底部加载更多内容的机制常被称为“无限滚动”或“无限加载”，它能够提升用户体验，因为用户无需手动翻页，内容会随着滚动自动加载。在实际应用中，还需要考虑如何处理分页逻辑、加载...
jScroll还支持动态加载内容，当用户滚动到底部时自动加载更多数据，这对新闻、博客或社交媒体类型的网站特别有用。 在实现自定义滚动条的过程中，通常会用到一些图形资源，如`scroll_bk.gif`。这个文件可能是一个...
例如，在社交媒体新闻feed或者电商商品列表中，用户滚动到底部时，可以自动加载更多的内容，提升用户体验。 最后，`压缩包子文件的文件名称列表`中的"滚动条移到页面底部调用事件.txt"很可能包含了具体的JavaScript...
在网页开发中，"浏览器滚动条到达底部，触发事件"是一种常见的交互设计，常用于实现无限滚动或分页加载更多内容的功能。这种效果在社交媒体网站如微博、Facebook等上广泛使用，用户滚动到页面底部时，会自动加载新的...
这种技术允许用户在浏览网页时，无需点击分页按钮，只需将鼠标滚轮滚动到页面底部，页面内容就会自动加载更多。这种设计优化了用户体验，特别是在内容丰富的网站如社交媒体、新闻门户和电商网站中。 1. **无限滚动...
这种功能常用于展示广告、提示消息或者加载更多内容等。jQuery库提供了一种简单且强大的方式来实现这样的交互效果。本文将深入探讨如何使用jQuery来实现“鼠标滚动条到页面底部时浮动层滑动弹出信息”的功能。 首先...
在这个示例中，当用户滚动到距离页面底部100像素范围内时，可以触发加载更多内容的事件。 此外，如果想进行进一步的技术探讨，可以参考提供JS常用事件类型与函数功能说明的在线查询工具。这类工具能够帮助开发者...
10. **滚动监听事件**：JavaScript提供了`scroll`事件，开发者可以通过监听这个事件来实现滚动时触发的交互，如无限滚动加载更多内容。 综上所述，动态滚动条不仅关乎用户界面的美观，更涉及到用户体验和交互设计。...
滚动条滚动加载数据，也称为“无限滚动”或“瀑布流加载”，是当用户滚动到页面底部时，新的内容自动加载到页面下方。这种设计模式常用于社交媒体、新闻网站和电商产品列表等，让用户可以无缝浏览大量内容。实现这一...
在网页开发中，有时我们需要监听用户的滚动行为，例如在用户滚动到页面底部时加载更多内容，或者检测页面数据是否被用户修改。这个场景涉及到的主要知识点包括JavaScript中的滚动事件处理、DOM操作以及页面状态的...
滚动条监听在现代网页设计中非常常见，它可以用于创建无限滚动、视差效果或者在用户接近页面底部时加载更多内容等。要实现这一功能，我们需要借助JavaScript的事件监听器。 首先，我们需要获取到页面的滚动条位置。...
在网页开发中，有时我们需要监听用户的滚动行为，特别是在无限滚动或加载更多内容的场景下。本文将详细解析如何使用jQuery来实现判断滚动条滚动到document（文档）底部的方法。这个功能通常用于动态加载数据，例如...