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. Linux下动态库使用小结

    转自:https://blog.csdn.net/jaylong35/article/details/6132087 1. 静态库和动态库的基本概念        静态库,是在可执行程序连接时就已经加 ...

  2. AFNetworking HTTP响应头返回数据

    //发送验证码 NSLog(@"发送验证码"); AFHTTPRequestOperationManager *manager = [AFHTTPRequestOperationM ...

  3. 超级好看!巧用PS将风光人像打造成唯美的小星球效果!

    本篇教大家如何巧用PS将风光人像照片打造成唯美的小星球!教程讲解过程很细致,理论实操简单易懂,最终完成效果灰常的漂亮,喜欢的小伙伴赶快收走学起来吧! 原图: 效果图: PS:1.对齐图像,选中所有图, ...

  4. html5 data-*自定义属性取值

    demo: <!DOCTYPE HTML> <html> <head> <title></title> <meta http-equi ...

  5. system v 共享内存

    #include <stdio.h> #include <string.h> #include <errno.h> #include <unistd.h> ...

  6. maven下的jar项目打包的方法

    1.先对pom项目进行install: RunAs->maven install,如果出现如下错误: Failed to execute goal org.apache.maven.plugin ...

  7. 玩具谜题(NOIP2016)

    题目链接:玩具谜题 提高组日常水题. 直接模拟,有需要注意的点会在代码后讲解: #include<bits/stdc++.h> using namespace std; int main( ...

  8. unity实现一个物体绕着某点旋转

    transform.RotateAround(o.transform.position,Vector3.up,20*Time.deltaTime);transform.Rotate(Vector3.u ...

  9. 通俗理解 CPU && GPU

    CPU 力气大啥P事都能干,还要协调.GPU 上面那家伙的小弟,老大让他处理图形,这方面处理简单,但是量大,老大虽然能处理,可是老大只有那么几个兄弟,所以不如交给小弟处理了,小弟兄弟多,有数百至数千个 ...

  10. js 获取数组最后一个元素

    当然有很多中做法 我这边就随便写几个最常用 最简单的方法把 # shift 删除数组第一个元素,并返回该元素,跟pop差不多 var a = ["aa","bb" ...