页面滚动动态加载数据

//返回顶部js

$(window).scroll(function() {
            var sc = $(window).scrollTop();
            //var rwidth=$(window).width()
            if (sc > 0) {
                $("#goTopBtn").css("display", "block");
                $("#goTopBtn").css("right", "40px");
            } else {
                $("#goTopBtn").css("display", "none");
            }
        });

function goTop() {
            var sc = $(window).scrollTop();
            $(‘body,html‘).animate({
                scrollTop : 0
            }, 500);
        }

//滚动加载数据

$(document).ready(function(){  
        var range = 100;             //距下边界长度/单位px  
        var elemt = 500;           //插入元素高度/单位px  
        var maxnum = 5;            //设置加载最多次数  
        var num = 1;                 //当前页数
        var totalheight = 0;   
        var main = $("#main");                     //主体元素  
        var  flag=true;                  //上一页加载是否完成判断,true->加载下一页数据;false->不执行加载
        var message=$("#message");
        $(window).scroll(function(){  
        //setTimeout(time,1000);  
       // function time(){
                    var srollPos = $(window).scrollTop();    //滚动条距顶部距离(页面超出窗口的高度)  
              
            //console.log("滚动条到顶部的垂直高度: "+$(document).scrollTop());  
            //console.log("页面的文档高度 :"+$(document).height());  
            //console.log(‘浏览器的高度:‘+$(window).height());  
          
            totalheight = parseFloat($(window).height()) + parseFloat(srollPos);  
            if(($(document).height()-range) <= totalheight  && num <maxnum&&flag==true) {  
                num++;
                 flag=false;
                //main.append("<div style=‘border:1px solid tomato;margin-top:20px;color:#ac"+(num%20)+(num%20)+";height:"+elemt+"‘px >hello world"+srollPos+"---"+num+"</div>");  
                //num++;  
                var html="";
                $.post("inform_overlayInform.action",{"page":num},function(json){
                if(json.allPages>=num){       
                $.each(json,function(i,j){         //循环遍历数据
                     $.each(j,function(ii,jj){
                     var str=jj[0].createTime;
                     var t=str.substr(0,4)+"-"+str.substr(4,2)+"-"+str.substr(6,2)+" "+str.substr(8,2)+":"+str.substr(10,2)+":"+str.substring(12);
                             html+=‘<tr><td>‘+((ii+1)+(num-1)*5)+‘</td>‘;
                             html+=‘<td>‘+jj[0].content+‘</td>‘;
                             html+=‘<td>‘+jj[1]+‘</td>‘;      
                             html+=‘<td width=20%>‘+t+‘</td>‘;  
                             html+=‘<td><a href=\"javascript:del(\‘inform_deleteInform.action?informId=‘+jj[0].informId+‘\‘)\">‘+"删除"+‘</a></td></tr>‘;                                         
                    if(((ii+1)+(num-1)*5)==json.allRecords){   
                             return false;
                    }
                     });                 
                });                
                 main .append(html);
                flag=true;
                }else{
                message.append(‘<h6 align=center>已经没有数据了~_~!</h6>‘);
                num+=maxnum;
                }
                },"json");     
            }else if(($(document).height()-range) <= totalheight  &&num==maxnum&&flag==true){
                 message.append(‘<h6 align=center>我只能做这么多了~_~!</h6>‘);
                num+=maxnum;
                }
         //  }
        });  
    });

//后台查询所返回的json数据

{"allRecords":41,"allPages":9,"page":1,"pageSize":5,"resultList":
[
[{"content":"<a href=\"http://www.baidu.com\" target=\"_blank\">http://www.baidu.com<\/a><img border=\"0\" alt=\"\" src=\"http://localhost:8081/JXED_SERVER/kindeditor/plugins/emoticons/images/13.gif\" />","sclId":"1","createTime":"20141030101151","clsId":"1","informId":"402885fa495ed0d901495ed2c45c0000","createOperId":"0","graId":"1"},"管理员"],
[{"content":"<img border=\"0\" alt=\"\" src=\"http://localhost:8081/JXED_SERVER/kindeditor/plugins/emoticons/images/35.gif\" />","sclId":"1","createTime":"20141030100712","clsId":"1","informId":"402885fa495ecbb101495ece835c0000","createOperId":"0","graId":"1"},"管理员"],
[{"content":"这是一个测试信息!!不需要太多的问题","sclId":"123","createTime":"20141029172307","clsId":"402885fa492c950d01492cbb29370003","informId":"40288540495b34a601495b373ea60001","createOperId":"0","graId":"123"},"管理员"],
[{"content":"<strong>请输入所要发布的内容!<\/strong>","sclId":"123","createTime":"20141029171454","clsId":"402885fa492c950d01492cbb29370003","informId":"40288540495b2a9001495b2fb9b70003","createOperId":"0","graId":"123"},"管理员"],
[{"content":"请输入所要发布的内容!过放电","sclId":"123","createTime":"20141029155653","clsId":"402885fa492c950d01492cbb29370003","informId":"402885fa495ab57601495ae84b880013","createOperId":"0","graId":"123"},"管理员"]
]
,"pageLink":"","params":{}}

时间: 2024-10-14 04:17:47

页面滚动动态加载数据的相关文章

页面滚动动态加载数据,页面下拉自动加载内容 jquery

<!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type="text/javascript"></ script> < script type="text/javascript"> $(document).ready(function(){ var range = 50; //距下边界长度/单位px var

jQuery页面滚动底部加载数据

$(window).scroll(function () {        var scrollTop = $(this).scrollTop();        var scrollHeight = $(document).height();        var windowHeight = $(this).height();        if (scrollTop + windowHeight == scrollHeight) {        //此处是滚动条到底部时候触发的事件,在这

[JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 [JavaScript] 纯文本查看 复制代码

滑轮滚动到页面底部ajax加载数据

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧 当然本例子采用的是jquery库,后期会做成原生js.本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height(): 再给windo

滚屏加载--无刷新动态加载数据技术的应用

index.html <?php require_once('connect.php'); //连接数据库 $user = array('demo1','demo2','demo3','demo3','<de></de>mo4'); //模拟了几个用户 ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

[转]JavaScript实现 页面滚动图片加载

本文转自:http://www.cnblogs.com/Darren_code/archive/2011/07/21/LoadImage.html 又到了这个月的博客时间了,原计划是打算在这个月做一个的功能较炫的拖拽类,可是感觉想的太容易,实现起来遇见不少问题,如果技术分享做不到有助于人反而害人,那就歇菜了,所以还是等本人多找些资料研究研究,“拖拽类“先放放吧,下面开始正题... 为什么写这篇文章? 1.优化页面很实用的方法,技术实现不难: 2.搜索了相关内容的文章,好像都是用jQuery的方法

用collection view动态加载数据卡顿的可能原因

在用collectionview动态加载数据时有个好处,就是cell得到了复用,如果整屏显示一个cell,最多只有两个cell,坏处就是需要不断的刷新cell,这时候容易卡顿. 每次滑动collectionview会调用代理方法,获取新的cell,这时你要将数据传给cell并进行显示. 现在的情况是快速滑动的时候和慢速滑动的时候不会卡顿,快速滑动的时候不会请求数据,所以卡顿原因可能是在请求数据的时候,慢速滑动的时候因为间隔时间长,数据应该都加载好了,所以卡顿原因可能是间隔过短,cell已经被创建

动态加载数据新的可行性

动态加载数据就是随着用户的交互情况来加载数据,避免一次全部加载浪费流量和卡顿. 最典型的情况就是用户查看每天的信息这种状况. 最开始我的做法是用一个scrollview和三个view来解决.先实现一个轮播图效果,每次用户左滑和右滑之后又将页面跳回到中间的页面,这个时候中间页面的状态应该和左滑或右滑页面的状态相同.所以每次都是先加载左中右三天数据,滑动到右边后,重置三天数据跳转到中间. 但这种有个问题,就是很难实现bounce反弹效果,即使实现了代码会非常乱,还有就是快速滑动的时候造成的无法滑动问

ListView动态加载数据分页(使用Handler+线程和AsyncTask两种方法)

ListView动态加载数据分页(使用Handler+线程和AsyncTask两种方法)