无刷新动态加载数据,滚动条加载
滚屏加载更多数据,适合评论等页面
本例的数据库很简单,一看就明了
PHP Code
- <div id="container">
- <?php
- $query=mysql_query("select * from content order by id desc limit 0,10");
- while ($row=mysql_fetch_array($query)) {
- ?>
- <div class="single_item">
- <div class="element_head">
- <div class="date"><?php echodate('m-d H:i',strtotime($row['updatetime']));?></div>
- <div class="author"><?php echo$row['id'];?></div>
- </div>
- <div class="content"><?php echo$row['message'];?></div>
- </div>
- <?php } ?>
- </div>
- <div class="nodata"></div>
js文件
JavaScript Code
- <script type="text/javascript">
- $(function(){
- var winH = $(window).height(); //页面可视区域高度
- var i = 1;
- $(window).scroll(function () {
- var pageH = $(document.body).height();
- var scrollT = $(window).scrollTop(); //滚动条top
- var aa = (pageH-winH-scrollT)/winH;
- if(aa<0.02){
- $.getJSON("result.php",{page:i},function(json){
- if(json){
- var str = "";
- $.each(json,function(index,array){
- var str = "<div class=\"single_item\"><div class=\"element_head\">";
- var str = str + "<div class=\"date\">"+array['date']+"</div>";
- var str = str + "<div class=\"author\">"+array['author']+"</div>";
- var str = str + "</div><div class=\"content\">"+array['content']+"</div></div>";
- $("#container").append(str);
- });
- i++;
- }else{
- $(".nodata").show().html("别滚动了,已经到底了。。。");
- returnfalse;
- }
- });
- }
- });
- });
- </script>
result.php
PHP Code
- <?php
- include("conn.php");
- $page = intval($_GET['page']); //获取请求的页数
- $start = $page*5;
- $query=mysql_query("select * from content order by id desc limit $start,5");
- while ($row=mysql_fetch_array($query)) {
- $arr[] = array(
- 'content'=>$row['message'],
- 'author'=>$row['id'],
- 'date'=>date('m-d H:i',strtotime($row['updatetime']))
- );
- }
- echo json_encode($arr); //转换为json数据输出
- ?>
相关推荐
**jQuery滚动加载数据实现瀑布流布局** 在网页设计中,瀑布流(Masonry)布局是一种流行的方式,它能展示信息时让页面看起来更加美观且有层次感,类似于QQ空间动态加载数据的效果。当用户滚动页面时,内容会随着...
下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据 都可以 别忘了引用jquery类库 $(window).scroll(function () { var scrollTop = $(this)....
用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...
**jQuery无限滚动加载图片瀑布流代码详解** 在网页设计中,瀑布流布局(Masonry Layout)因其独特的展示方式,能够使页面元素排列得既美观又节省空间,特别适合用于图片展示类网站。jQuery无限滚动加载图片瀑布流...
"jQuery局部div滚动加载远程数据"这个主题是关于如何利用jQuery实现一个功能,即当用户滚动到页面的某个div区域时,动态地从服务器加载更多的数据,这种技术通常称为"无限滚动"或"滚动加载"。这个特性在新闻网站、...
在本示例中,我们将讨论如何结合jQuery和AJAX技术,实现在ASP.NET环境中,当用户滚动滚动条时,下拉列表控件自动加载更多数据的功能。 jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。在...
jQuery懒加载插件是一种优化网页性能的技术,它允许我们在用户滚动页面时按需加载内容,而不是一次性加载所有数据。这种技术对于拥有大量图片、视频或动态数据的网页尤其有用,因为它减少了初始页面加载时间,提高了...
本示例将详细讲解如何利用jQuery库为普通的HTML表格添加滚动条,以实现数据的高效浏览。 一、jQuery简介 jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery的设计...
它允许用户在表格内容区域添加垂直或水平滚动条,以便在有限的空间内查看更多的数据,而不会使页面显得过于拥挤。本文将详细介绍如何使用jQuery Table Scroll插件以及相关的技术要点。 首先,要使用jQuery Table ...
// 获取当前滚动条位置 if (scrollTop + windowHeight >= documentHeight) { // 检查是否接近底部 // 加载更多数据的逻辑 } ``` 当满足条件时,意味着用户已经滚动到了页面底部,接下来就是加载更多数据的部分。...
在实现滚动加载中,JQuery的`$(window).scroll()`事件监听用户的滚动行为,`$(document).height()`获取文档总高度,`$(window).height()`获取窗口可视区域高度,以及`$(window).scrollTop()`获取滚动条距离顶部的...
《jQuery动态滚动条加载效果详解》 在网页设计与开发中,用户界面的交互体验是至关重要的,其中滚动条加载效果就是提升用户体验的一种巧妙手段。本篇将详细讲解如何使用jQuery实现动态滚动条加载效果,以及相关的...
无限滚动加载,也称为“滚动监听”或“懒加载”,通过监听滚动条位置,判断是否接近页面底部。一旦达到设定的阈值,就会通过Ajax异步请求获取新的数据(通常是JSON格式),然后使用JavaScript动态插入到页面中。这种...
用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...
2. **jQuery事件监听**:绑定滚动事件到窗口或指定的滚动元素,当用户滚动到页面底部时触发加载新数据的函数。 ```javascript $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() == ...
根据提供的文件信息,本文将详细解析“jquery滚动广告图片”的实现原理、代码结构及关键功能。此案例展示了如何使用jQuery库来实现一个自动滚动显示图片的广告轮播效果。 ### 一、整体概述 该案例的目标是创建一个...
本文实例讲述了jquery滚动加载数据的方法。分享给大家供大家参考。具体分析如下: 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载...
`pageSize`参数定义了每次滚动加载的数据条数。`loadingStart`、`loadingComplete`和`loadingError`则是回调函数,分别在加载开始、结束和出错时调用。 在服务器端,你需要创建一个API接口`data.php`,它负责根据...
标题中的“15个带示例的jQuery滚动条插件”指的是在网页设计中,使用jQuery库来增强或替换浏览器默认滚动条的15种不同的插件。这些插件允许开发者自定义滚动条的样式、行为,提升用户体验,并且通常会提供实际运行的...
这款轻量级的滚动条插件则是基于jQuery构建的,旨在为网页中的滚动条添加更多功能和视觉效果,而不增加过多的页面负担。 该插件的核心功能包括: 1. **自定义样式**:用户可以根据需要定制滚动条的外观,包括颜色...