无刷新动态加载数据,滚动条加载
滚屏加载更多数据,适合评论等页面
本例的数据库很简单,一看就明了
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滚动滚动条加载数据 类似瀑布流 像QQ空间 动态加载数据 效果很不错
用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...
jQuery懒加载插件页面滚动加载数据代码 jQuery懒加载插件页面滚动加载数据代码
ASP.NET+jquery实现AJAX滚动滚动条加载数据的下拉列表控件
用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...
本文实例讲述了jquery滚动加载数据的方法。分享给大家供大家参考。具体分析如下: 我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载...
下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据 都可以 别忘了引用jquery类库 $(window).scroll(function () { var scrollTop = $(this)....
页面滚动到底部自动加载数据功能模拟,HTML5+Jquery,需要的下载看一下
本文实例讲述了jQuery实现当拉动滚动条到底部加载数据的方法。分享给大家供大家参考,具体如下: 滚动条到底部加载数据原理很简单,就是为window或者滚动元素添加一个scroll事件,浏览器每次触发scroll事件时判断...
需求:AJAX滚动滚动条加载数据的下拉列表 控件名称:Webcombo 所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx) 下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框。最终结果如下图 先分析...
代码如下: <...拉动滚动条加载数据</title> [removed][removed] [removed] $(function () { var i = 4;$(window).bind(“scroll”, function (event) { //滚动条到网页头部的 高度,兼容ie,ff,chr
数据延迟加载功能的jQuery插件,类似新浪微博的滚动加载,当滚动条滚动到底部的时候,加载数据。使用方法: 加载jquery文件和DataLazyLoad文件。[removed][removed] [removed][removed] 根据选择器调用插件$("....
数据异步加载可以发生在用户点击“查看更多”按钮或滚动条滚动到窗口的底部时自动加载;在接下来的博文中,我们将介绍如何实现自动加载更多的功能。 图1 微博加载更多功能 正文 假设,在我们的数据库中存放着用户的...
分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据下面开讲: 首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用...
下面小编就为大家带来一篇jquery 实现滚动条下拉时无限加载的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了jQuery实现模仿微博下拉滚动条加载数据效果,涉及jQuery响应下拉滚动事件动态操作页面元素的技巧,需要的朋友可以参考下