define(function(){
function ScrollMoreInfo($wraper , loadDataFunc , json_ids , perNum , tpl_info)
{
this.$wraper = $wraper;
this.loadDataFunc = loadDataFunc;
this.originIds = json_ids;
this.tpl = tpl_info;
this.isAppendIng = false;
this.perNum = perNum;
this.leftData = [];
}
ScrollMoreInfo.prototype = new Hnb.event();
$.extend(ScrollMoreInfo.prototype , {
init: function(){
var self = this;
self.initData();
self.register();
},
initData: function(){
var self = this;
self.start = self.originIds.length;
self.isEnd = false; self.idRef = {};
for(var i in self.originIds)
{
if(self.originIds[i]){
self.idRef[self.originIds[i] + "_"] = true;
}
}
},
register: function(){
var self = this;
$(window).scroll(function(){
var height = $(window).height();
var top = $(window).scrollTop();
var bodyHeight = $("#id_top_wrap").height();
if(height + top > bodyHeight - 100) {
//加载数据...
self.appendMoreData();
}
});
$(window).trigger("scroll");
},
appendMoreData: function(){
var self = this; if(self.isAppendIng){
return;
}
if(self.leftData.length >= self.perNum){
var arr_data = self.leftData.splice(0 , self.perNum);
self.renderData(arr_data);
} else if(self.isEnd) {
if(self.leftData.length == 0){
self.renderNoMore();
return;
}
var arr_data = self.leftData.splice(0 , self.perNum); self.renderData(arr_data); if(self.leftData.length == 0){
self.renderNoMore();
}
} else { //加载更多数据
self.isAppendIng = true;
self._loadData().fail(function(){
self.isEnd = true;
}).always(function(){
self.isAppendIng = false;
self.appendMoreData();
}); }
},
// 尾部图片(no-more-data / data-loading)的展示
renderNoMore: function(){
var self = this;
self.$wraper.find(".c-data-no-more").removeClass("dn");
self.$wraper.find(".c-data-loading").addClass("dn");
},
// 数据模板渲染
renderData: function(arr_data){
var self = this;
var html = Hnb.ui.tmpl(self.tpl , {
arr_infoList : arr_data
});
self.$wraper.find(".c-data-loading").before(html);
self.trigger("after:render:more:data");
},
// 数据加载
_loadData: function(){
var self = this;
var defer = $.Deferred();
self.loadDataFunc(self.start , self.perNum).done(function(json_msg){ if(json_msg.state){
//失败,将现有数据展示到页面,设置为结束
defer.reject(-1);
} else {
if(json_msg.data.infoList.length < self.perNum){
self.isEnd = true;
}
self._storeData(json_msg.data.infoList);
defer.resolve();
}
}).fail(function(){
defer.reject(-1);
});
// 数据读取起点
self.start += self.perNum;
return defer;
},
// 当加载的数据小于每页的长度时,先存储起来
_storeData: function(arr_data){
var self = this;
for(var i in arr_data)
{
if(arr_data[i].id && !self.idRef[arr_data[i].id + "_"])
{
self.leftData.push(arr_data[i]);
self.idRef[arr_data[i].id + "_"] = true;
}
}
}
}); return {
create: function($wraper , loadDataFunc , json_dataInit , perNum , tpl_info){
var obj = new ScrollMoreInfo($wraper , loadDataFunc , json_dataInit , perNum , tpl_info);
obj.init();
return obj;
}
}
});

[require-js]向下滑动ajax加载的javascript实现的更多相关文章

  1. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...

  2. 通过 AJAX 加载的 JavaScript 脚本的调试

     //# sourceURL=  注意#后面有一个空格.

  3. iScroll.js 向上滑动异步加载数据回弹问题

    iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...

  4. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  5. 向下滚动页面加载图片的js

    js代码 scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图 ...

  6. js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

    js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...

  7. Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果

    在页面中引入 Pace.js  和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...

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

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  9. 分页插件思想:pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

随机推荐

  1. 更好地限制一个UITextField的输入长度

    要限制一个UITextField的输入字数,首先想到的应该是通过 UITextFieldDelegate 的代理方法来限制: - (BOOL)textField:(UITextField *)text ...

  2. Mac 下配置Nginx安装环境配置详细说明

    环境信息: Mac OS X 10.11.1 Homebrew  0.9.5 正文 一.安装 Nginx 1.终端执行: ? 1 2 brew search nginx brew install ng ...

  3. NC 6系后台调用接口保存单据

    IPFBusiAction ipf = (IPFBusiAction)NCLocator.getInstance().lookup(IPFBusiAction.class); ipf.processA ...

  4. rm命令删除文件时排除特定文件

    删除文件时排除特定文件 www.python  tab.com/html/2013/linuxkaiyuan_0205/214.html 删除当前目录下所有 *.txt文件,除了test.txt 1 ...

  5. 查看PHP代码执行的时间

    $t1 = microtime(true); //...要执行的代码$t2 = microtime(true); echo '耗时'.round($t2-$t1,3).'秒';

  6. python线程池

    https://blog.csdn.net/qq_33961117/article/details/82587873#!/usr/bin/python # -*- coding: utf- -*- f ...

  7. .net从网络接口地址获取json,然后解析成对象(一)

    整理代码,今天遇到一个问题,就是从一个场景接口获取json,然后解析成对象.之前的时候都好好的,这次返回的json字符串里,由于字符编码的问题,格式上不能转换.一直以为是解析的过程编码有误,试了utf ...

  8. Spring Boot学习笔记:kafka应用

    Kafka作为众多Java消息中间件之一,有诸多优点.本文讲解Kafka的应用.学习一个新的知识点,建议先找一个demo,越简单越好的demo,跑通这个demo,了解大致原理,然后在分析细节,详细了解 ...

  9. js之function

    function* function* 这种声明方式(function关键字后跟一个星号)会定义一个生成器函数 (generator function),它返回一个  Generator  对象. 你 ...

  10. python之并发编程初级篇8

    一.进程理论 1)进程介绍 .什么是进程 一个正在进行的过程,或者说是一个程序的运行过程 其实进程是对正在运行的程序的一种抽象/概括的说法 进程的概念起源操作系统,进程是操作最核心的概念之一 操作系统 ...