对JQuery不咋了解,想实现一个像google图片里的下翻页的效果,闭门造车一番,终于搞定了。
不咋了解其他实现方式,有好的实现方式探讨下。
我的实现方式没啥难的,有一个需要注意的地方就是设置一个锁,避免onscroll事件触发后多次调用ajax。
另外如果是静态数据内容,比如团购网站的每天团购内容不变化,可以记录刷新到数据的总数量。因为每次数量都是增加的,如果数量没有增加,则说明没有数据了,就不再进行ajax请求,减少后台压力。如果数据是动态刷新的,比如google图片之类的,就不能用这个了。
在本例中,是唱片超市中的唱片,每个唱片框的高度是固定的。唱片超市里的数据基本也是静态的。
大概流程为:
onscroll达到刷新数据的条件->进行ajax获取数据->在数据列表div下通过appendTo增加数据
具体代码如下:
var lastSize = 0;//最后一次刷新,列表中元素总数量(这种机制不适合动态数据)
var doing = false;//锁,表示是否有onscroll事件在执行刷新操作,这个比较关键
window.onscroll = function() {
if(doing ==true)
return;
var scrollHeight = $(document).scrollTop();//滚动过的高度
var listBoxHeight = $('.list_box').height(); //每个刷新出图片框的高度
if(scrollHeight > listBoxHeight){
var discSize = $("#discSize").val(); //已刷新列表的数量
var allHeight = $(document).height();
if(allHeight - scrollHeight -listBoxHeight*3 < 0 && discSize!=lastSize){//达到刷新条件(页面高度判断),并且最后一页没有刷新过
doing = true;//锁
lastSize = discSize;//保存最后一页刷新过的size,避免重复刷新最后一页
ajaxGetDiscList(false);
doing =false;//释放锁
}
}
}
function ajaxGetDiscList(refresh){
$.get("..查询url",
{ ..查询条件}
,function(result){
if(refresh==true)//如果是更改了查询条件,则替换原DIV中内容
$('#shop_con').html(result);
else{ //在当前查询条件下增加内容
$(result).appendTo($('#shop_con'));
}
}
);
}
踩的哥们要留下意见再走啊
分享到:
相关推荐
基于jquery.masonry插件开发的瀑布流ajax动态加载数据功能(使用的是aspx的页面)
什么是AJAX? 这里的AJAX不是希腊神话里的英雄,也不是清洁剂品牌,更不是一门语言,而是指异步Javascript和XML(Asynchronous ...动态加载数据,即在后台交换数据。 比方说,一个便签本应用,当你在表单里填写好内容,
自己用js和ajax实现的 表单分页,复杂表单中数据的加载 等场景的源码
用jQuery,结合PHP和Mysql,通过实例讲解如何实现Ajax数据加载效果。
主要介绍了jQuery+datatables插件实现ajax加载数据与增删改查功能,涉及jQuery结合datatables插件针对页面表格实现数据加载及增删改查等相关操作技巧,需要的朋友可以参考下
主要是描述使用JSON JQuery_AJAX实现页面动态加载与页面表单数据的异步保存。首先页面通过调用JQuery_AJAX方法访问后台Action,在后台Action中将获取到的JavaBean、List、Map等数据类型转换为json-lib.ja 资源太大,...
这种技术我暂且称它为jQuery+Ajax无刷新滚屏加载技术。我们发现图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。 若是想看该网页特效教程 http://www.sucaihuo.com/js/9.html,滚动条下拉到最后,还可以查看...
ajax() 方法通过 HTTP 请求加载远程数据。 该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要...
就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实就是一个典型的Ajax应用。...
用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...
本文通过实例代码给大家介绍了jQuery+Ajax请求本地数据加载商品列表页并跳转详情页,需要的朋友可以参考下
本资源包括了ajax+asp实现页面更新的全套教程和代码
发表评论无刷新,www.sendawangluo.com页面获取评论时显示loading加载效果jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab选项卡切换、图片轮转显示,实现起来都非常的简单,...
今天小编就为大家分享一篇jquery 通过ajax请求获取后台数据显示在表格上的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
NULL 博文链接:https://yjck.iteye.com/blog/745692
用 jquery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示...
局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了。 例子,定时局部刷新 定时局部刷新用到jQuery里面的...
本篇文章通过两种方法实例讲解ajax定时刷新局部页面,当然方法有很多种,也可以不使用ajax来刷新页面,可以使用jquery中的append来给指定内容加东西,但是都不太实用,最实用的方法还是ajax加载数据了。 方法一: ...
上滑加载,ajax请求后台,获取数据,然后加载到页面,完完整整,拿来即用
之前一直在写JQUERY代码的时候遇到AJAX加载数据都需要考虑代码运行顺序问题。最近的项目用了到AJAX同步。这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个AJAX...