基于jquery,该代码已经在http://hub.olympic.org/中使用,各位有需要的可以参考实现逻辑:
(function(UFA){ var $ = jQuery; var PageLoader = function(){ this.init(); }; PageLoader.prototype.reset = function(options){ var settings = $.extend({ container: '#', getParams: function(){ return {}; }, getUrl: function(){ return '#'; }, offset : 0, pageSize : 10 }, options); settings.isLoading = false; settings.isEnd = false; this.settings = settings; this.$container = $(this.settings.container); }; PageLoader.prototype.init = function(){ var self = this; $(window).on('scroll', function(){ var $container = self.$container; if(!self.$container || self.$container.length < 1 || self.settings.isLoading || self.settings.isEnd){ return; } var listPos = $container.offset().top + $container.height(); if(listPos <= 0){ return; } var docPos = (window.innerHeight ? window.innerHeight : $(window).height()) + $(window).scrollTop();; if (docPos + 10 >= listPos) { var offset = self.settings.offset + self.settings.pageSize; self.doSearch(offset); } }); }; PageLoader.prototype.doSearch = function(offset){ var self = this; offset = (offset && offset) > 0 ? offset : 0; this.settings.offset = offset; this.settings.isLoading = true; var style = 'normal'; if(offset == 0){ this.settings.isEnd = false; }else{ style = 'scroll'; } var params = this.settings.getParams(); params['offset'] = offset; var url = this.settings.getUrl(); UFA.ajax({ type:'post', url: url, data: params, dataType : 'html', style: style, success:function(html){ var html = $.trim(html); if(html == '' || html.indexOf('<p class="search_no_result">') != -1){ self.settings.isEnd = true; if(offset != 0){ html = ''; } } if(offset == 0){ self.$container.html(html); }else{ self.$container.append(html); } }, error:function(){ UFA.Dialog.alert("Loading page failed, please try again"); }, complete:function(){ self.settings.isLoading = false; UFA.removeScrollLoading(); } }) }; window['_globalPageLoader_'] = new PageLoader() UFA.PageLoader = function(options){ window['_globalPageLoader_'].reset(options); }; UFA.PageLoader.prototype.doSearch = function(offset){ window['_globalPageLoader_'].doSearch(offset); }; })(UFA);
相关推荐
这种技术我暂且称它为jQuery+Ajax无刷新滚屏加载技术。我们发现图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。 若是想看该网页特效教程 http://www.sucaihuo.com/js/9.html,滚动条下拉到最后,还可以查看...
实现双击自动滚屏的JS代码 实现双击自动滚屏的JS代码 实现双击自动滚屏的JS代码
初学php,基于ajax,js用thinkphp做的拉下滚动条到底部时,无刷新加载数据库内容,...此应用代码有一个小前提,就是默认页面原有的内容量够多,是页面存在滚动条,不去判段页面是否有滚动条.小白一枚,望各位大神多多指导!谢谢
Html 双击自动滚屏代码Html 双击自动滚屏代码
OnSCrollListener 滚屏时候不加载数据
纵向定位滚屏特效代码是一款支持鼠标滚轮滚动的全页面滑动切换特效代码。
jQuery html5响应式页面滚屏代码是一款CSS3响应式纵向滚屏翻页特效,支持键盘,鼠标操作。
经过调试、修改,完全可以使用的图片滚屏代码。
Flash游戏中人物走动与场景自动滚屏AS3.0代码,自己做游戏时,要用到,一直没在网上找到源码,自己结合相关知识动手写了一个.(保证能用)
显示快捷,无冗余的图片滚屏+文字说明代码
html5滚屏html5滚屏模板。
详细的ios上滚屏的效果 以及代码 很清晰
RichEdit控件删除行操作 自动滚屏到最后的应用示例
全页面横向定位滚屏是一款基于jquery实现的鼠标响应式横向定位滚屏特效代码。
之前为一家医院做一款家属公告软件,需要字幕的循环滚动功能。我借鉴了多个源码,这是我发现的最好的滚屏源码。
AVR MEGA16 MUSIC+LCD 滚屏菜单程序+PROTEUS仿真。
VB 自动滚屏功能 VB 自动滚屏功能 VB 自动滚屏功能
此网站为基于HTML5和CSS3特性开发的具有滚屏功能和进出场动画效果的一个地区旅游观光网站,为了网站能顺利打开,请使用谷歌浏览器,为了体验效果更佳,在浏览时请进入全屏模式。此网站只为表现出HTML5和CSS3的特点与...
主要介绍了jQuery实现公告新闻自动滚屏效果实例代码的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下