`
carge
  • 浏览: 51850 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

单例模式的滚屏加载示例代码

 
阅读更多

基于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滚屏加载

    这种技术我暂且称它为jQuery+Ajax无刷新滚屏加载技术。我们发现图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。 若是想看该网页特效教程 http://www.sucaihuo.com/js/9.html,滚动条下拉到最后,还可以查看...

    实现双击自动滚屏的JS代码

    1. **兼容性问题**:本示例代码可能不适用于所有浏览器,尤其是较旧版本的浏览器。为了确保更好的兼容性,可以考虑使用`window.pageYOffset`代替`document.body.scrollTop`来获取滚动条的位置。 2. **用户体验**:...

    thinkphp框架基于ajax,js的滚屏加载技术demo

    初学php,基于ajax,js用thinkphp做的拉下滚动条到底部时,无刷新加载数据库内容,...此应用代码有一个小前提,就是默认页面原有的内容量够多,是页面存在滚动条,不去判段页面是否有滚动条.小白一枚,望各位大神多多指导!谢谢

    OnSCrollListener 滚屏时候不加载数据

    5. 如果问题仍然存在,尝试使用已知良好的示例代码进行对比,找出差异。 通过以上分析和排查,你应该能够解决滚屏时不加载数据的问题。在实际开发中,遇到此类问题时,保持耐心,逐步排查,理解每个组件的工作原理...

    纵向定位滚屏特效代码.zip

    【标题】"纵向定位滚屏特效代码.zip"中包含的是一个JavaScript实现的全页面滚动切换效果,这种特效常用于网站设计,尤其是那些希望提供独特用户体验的现代网页。它允许用户通过鼠标滚轮来平滑地浏览页面内容,而不是...

    网站图片连续无缝滚屏代码

    在这个"网站图片连续无缝滚屏代码"中,我们将探讨实现这一功能的关键技术和步骤。 首先,我们需要了解基本的HTML和CSS来布局图片。在HTML中,图片通常以`&lt;img&gt;`标签形式存在,而CSS则用来控制图片的位置、大小和...

    jQuery html5响应式页面滚屏代码.zip

    【jQuery html5响应式页面滚屏代码】是一个利用JavaScript库jQuery和HTML5技术实现的现代网页设计元素。这种效果使得网站内容能够以一种流畅、动态的方式在垂直方向上滚动,提供了一种新颖的用户交互体验。它适用于...

    Html 双击自动滚屏代码

    ### Html 双击自动滚屏代码解析 在网页开发中,有时我们需要实现一些特殊的效果来增强用户体验或满足特定的功能需求。本篇文章将详细介绍一个通过HTML和JavaScript实现的双击自动滚屏功能。此功能允许用户通过双击...

    html5滚屏模板

    9. **AJAX异步加载**:为了提高页面加载速度,滚屏模板通常采用AJAX异步加载技术,只加载当前可见区域的内容,当用户滚动时再加载其他部分。 10. **Accessibility**:一个好的HTML5滚屏模板应该考虑无障碍访问性,...

    Flash游戏中人物走动与场景自动滚屏AS3.0代码

    在提供的“地图滚屏”文件中,可能包含了实现这一逻辑的代码,包括地图的加载、角色与地图的交互以及滚屏效果的处理。可能包括地图的分割、碰撞检测以及更复杂的滚动算法,例如平滑滚动或限制滚动边界。 总结,实现...

    滚屏

    "代码中国.url"看起来像是一个链接,可能指向了提供更多滚屏代码示例或教程的网站。至于"滚屏"这个文件,没有明确的扩展名,可能是另一个文档、代码文件或者资源文件,内容可能与滚屏的实现或示例有关。 在实际应用...

    安卓图片轮播广告轮播自动滚屏相关-超好用的可以加载本地图片和网络图片的轮播图.rar

    这个压缩包"安卓图片轮播广告轮播自动滚屏相关-超好用的可以加载本地图片和网络图片的轮播图.rar"包含了一个实现这种功能的示例代码,可能包括一个图片轮播库或者是一套自定义的实现方案。 1. **图片轮播组件**: ...

    通用图片滚屏+文字说明代码

    在给定的代码示例中,文字说明是简单地插入在图片之后,但为了更美观和灵活的布局,推荐使用CSS样式来控制文字的位置和样式,如设置字体大小、颜色、对齐方式等。 ### CSS样式优化 虽然给定的内容没有涉及CSS,但...

    实例6--文字滚屏

    【压缩包子文件的文件名称列表】"Demon_6"可能是一个包含了实现文字滚屏功能的代码文件或者示例程序。这个名字暗示它可能是系列教程或实例中的第六个部分,可能前几个部分涵盖了基础概念,而这个部分则更深入地探讨...

    滚屏(字幕循环滚动)软件VC源码

    为此,我们需要添加相应的用户界面元素(如滑块、按钮)并编写响应用户操作的代码。 在提供的压缩包文件"WWW.WEI2008.COM"中,很可能包含了实现上述功能的源码文件。源码阅读可以帮助我们更好地理解滚屏技术的具体...

    双击页面自动滚屏效果特效代码

    标题中的“双击页面自动滚屏效果特效代码”是指一种网页交互设计技术,它允许用户通过双击页面的任何地方,使页面自动滚动到顶部或底部。这种效果常见于一些现代网页设计中,以提供更便捷的用户体验。下面将详细解释...

    asp.net 滚屏实现实例

    在提供的文件"Ex02_04"和"Ex02_03"中,很可能是示例代码或练习题的资源,包括数据库连接信息、HTML/C#代码片段等。通过分析这些文件,你可以更深入地理解滚屏效果的具体实现。 总之,ASP.NET滚屏实现实例是通过结合...

    支持滚屏截图的截图软件

    操作简单,只需启动滚屏模式,软件会自动跟踪滚动条,直到捕获到全部信息。这对于处理长篇文档、浏览网页时保存完整信息,或者制作教程和演示文稿都极其方便。 除了滚屏截图,SnagIt还有许多实用特性。它提供了编辑...

    lcd1602滚屏显示

    在给定的代码中,滚屏显示的实现主要包括以下几个步骤: 1. **初始化LCD**:通过`init()`函数进行LCD的初始化设置。 2. **显示初始文本**:分别在第一行和第二行显示字符串“`ILOVEYOU`”和“`DINGXIAOYAN`”。 3. ...

    单页视觉差滚屏

    为了使用这个插件,你需要将这些文件部署到你的项目中,然后根据文档或者示例代码进行配置和调用。 总的来说,掌握单页视觉差滚屏技术需要理解JavaScript事件处理、DOM操作、CSS动画原理,以及一定的前端性能优化...

Global site tag (gtag.js) - Google Analytics