[require-js]向下滑动ajax加载的javascript实现
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实现的更多相关文章
- Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块
传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...
- 通过 AJAX 加载的 JavaScript 脚本的调试
//# sourceURL= 注意#后面有一个空格.
- iScroll.js 向上滑动异步加载数据回弹问题
iScroll是一款用于移动设备web开发的一款插件.像缩放.下拉刷新.滑动切换等移动应用上常见的一些效果都可以轻松实现. 现在最新版本是5.X,官网这里:http://iscrolljs.com/ ...
- js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...
- 向下滚动页面加载图片的js
js代码 scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图 ...
- js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...
- Pace.js – 超赞的页面加载进度自动指示和 Ajax 导航效果
在页面中引入 Pace.js 和您所选择主题的 CSS 文件,就可以让你的页面拥有漂亮的加载进度和 Ajax 导航效果.不需要挂接到任何代码,自动检测进展.您可以选择颜色和多种效果,有简约,闪光灯, ...
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...
- 分页插件思想:pc加载更多功能和移动端下拉刷新加载数据
感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...
随机推荐
- Autel MaxiSys MS906TS tire pressure settings Lexus LS460h
Use AUTEL MaxiSYS MS906TS error reader to install tire pressure Lexus LS460h in Vung Tau. Make : Lex ...
- BZOJ1935或洛谷2163 [SHOI2007]园丁的烦恼
BZOJ原题链接 洛谷原题链接 很容易想到二维前缀和. 设\(S[i][j]\)表示矩阵\((0, 0)(i, j)\)内树木的棵数,则询问的矩形为\((x, y)(xx, yy)\)时,答案为\(S ...
- Window7安装tensorflow整套环境详细流程
安装tensorflow方式有好多种,为了方便编译环境以及包管理,这里采用Anaconda平台安装tensorflow. tensorflow官网:http://www.tensorflow.org/ ...
- EXISTS 和 IN 的区别
exists子句的用法 select * from 表1 where exists (select * from 表2 where 表1.列名=表2.列名); exists子句返回的结果并不是从数据库 ...
- Spring 中的类加载机制 - ClassLoader
Spring 中的类加载机制 - ClassLoader Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) ClassLoa ...
- ssh密钥讲解
我们用ssh连接机器时候需要输用户名.密码,但是直接写账户文件的时候由于用的是明文,就存在安全的问题了.别人一旦截取了数据就获得了隐私了.这时候就用上ssh的密钥. ssh的密钥存是成对出现的,一个叫 ...
- Mysql 注入load_file常用路径
WINDOWS下: c:/boot.ini //查看系统版本 c:/windows/php.ini //php配置信息 c:/windows/my.ini //MYSQL配置文件,记录管理员登陆过的M ...
- [Hbase]Hbase技术方案
HBase架构简介 HBase在完全分布式环境下,由Master进程负责管理RegionServers集群的负载均衡以及资源分配,ZooKeeper负责集群元数据的维护并且监控集群的状态以防止单点故障 ...
- Fibonacci Number LT509
The Fibonacci numbers, commonly denoted F(n) form a sequence, called the Fibonacci sequence, such th ...
- ASP.NET 在OnClientClick中js方法直接调用Eval绑定字段的数据
最近有一项目中使用到了asp.net的GridView控件.需要在前端被点击某一行数据时,前端获取到改行后台绑定的数据序列号.遍用<%# Bind("ID) %>.<%# ...