[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写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...
随机推荐
- GM Tech 2 works with Hummer Yes or No
This is about GM Tech 2 scan tool for Hummer troubleshooting and programming. Can I have a cheap Tec ...
- LocalStorage的一些使用
LocalStorage是什么 LocalStorage 是在Html5中出现的一种本地存储.说到本地存储,大家立马会联想到Cookie,还有SqlLite. LocalStorage 中的数据不会像 ...
- 链接PDO
header('Content-type:text/html;Charset=utf-8'); /** * 实例化PDO对象 */ // 1, 设置相关的参数 // 1.1 确定数据源 $dbms = ...
- Python之路(第十五篇)sys模块、json模块、pickle模块、shelve模块
一.sys模块 1.sys.argv 命令行参数List,第一个元素是程序本身路径 2.sys.exit(n) 退出程序,正常退出时exit(0) 3.sys.version . sys.maxint ...
- 轻博客类Web原型制作分享——Tumblr
Tumblr(汤博乐)成立于2007年,是目前全球最大的轻博客网站,也是轻博客网站的始祖. Tumblr是一种介于传统博客和微博之间的全新媒体形态,既注重表达,又注重社交,而且注重个性化设置,成为当前 ...
- c++智能指针(1)
根据muduo开源库作者陈硕的一些文章.对于多线程下C++编程提出了一些观点.主要是多线程下对象的销毁比较困难,但是由于多线程下,mutext是无法保护析构的.而后提出了智能指针的方案并对使用该指针会 ...
- 【jquery+easyUI】-- $.messager.show 弹框显示
三种基本弹框 1.提示框,一秒停留 $.messager.show({ title: '提示', msg: '修改成功!', showType: 'fade', //设置显示类型 style: { l ...
- Proxmox Reset Root Password
http://c-nergy.be/blog/?p=1777 Step 1 – Boot your Proxmox VE machine. In the boot menu screen, you s ...
- scrapy爬取网址,进而爬取详情页问题
1.最容易出现的问题是爬取到的url大多为相对路径,如果直接将爬取到的url进行二次爬取就会出现以下报错: raise ValueError('Missing scheme in request ur ...
- 销售vs技术岗,做技术的方法思考
销售甚至比技术岗位挣得还多,当然,做技术的比较好的拿到的自然也多. 我在想个问题,技术的天然优势是可以不断地积累,包括写code,写博客,做流程,完善流程,自动化流程,或者把某些工作流程化,自动化,托 ...