[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写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...
 
随机推荐
- Python之路(第十二篇)程序解耦、模块介绍\导入\安装、包
			
一.程序解耦 解耦总的一句话来说,减少依赖,抽象业务和逻辑,让各个功能实现独立. 直观理解“解耦”,就是我可以替换某个模块,对原来系统的功能不造成影响.是两个东西原来互相影响,现在让他们独立发展:核心 ...
 - c++11 stl 学习之 shared_ptr
			
shared_ptr智能指针 shared_ptr 的声明初始化方式由于指针指针使用explicit参数 必须显示声明初始化shared_ptr<string> pNico = new s ...
 - js实现多标签页效果
			
点击导航按钮切换div的内容 html代码: <div class="tabs"> <ul id="tab"> <li>&l ...
 - 编译sgbm_ros中遇到的问题
			
出现的问题 这个会报错 1.解决方法是在文件sudo gedit /usr/local/cuda/include/crt/common_functions.h中注释掉如下 #define __CUDA ...
 - 视频基础知识:浅谈视频会议中H.264编码标准的技术发展
			
浅谈视频会议中H.264编码标准的技术发展 浅谈视频会议中H.264编码标准的技术发展 数字视频技术广泛应用于通信.计算机.广播电视等领域,带来了会议电视.可视电话及数字电视.媒体存储等一系列应用,促 ...
 - Java类加载机制及自定义加载器
			
转载:https://www.cnblogs.com/gdpuzxs/p/7044963.html Java类加载机制及自定义加载器 一:ClassLoader类加载器,主要的作用是将class文件加 ...
 - GUI的最终选择Tkinter模块练习篇
			
一.Canvas画布练习 1)简单的绘制图框 from tkinter import * # 构建一个窗口 tk = Tk() # 画布 canvas= Canvas(tk,width=,height ...
 - 爬取微博的数据时别人用的是FM.view方法传递html标签那么jsoup怎么解析呢
			
使用JSOUP就行 这里给出点思路 我只做了自己的首页和其他人的微博首页的抓取 其他的抓取没尝试(不好意思 比较懒...) 首先是利用JSOUP进行登陆 获取页面 看了下微博的登陆表格 发现用了aja ...
 - 2019.01.26 codeforces 528D. Fuzzy Search(fft)
			
传送门 fftfftfft好题. 题意简述:给两个字符串s,ts,ts,t,问ttt在sss中出现了几次,字符串只由A,T,C,GA,T,C,GA,T,C,G构成. 两个字符匹配的定义: 当si−k, ...
 - SELECT INTO创建临时表
			
SELECT INTO创建临时表 SQL Server临时表有两种类型:本地和全局.它们在名称.可见性以及可用性上有区别.本地临时表的名称以单个数字符号 (#) 打头:它们仅对当前的用户连接是可见的: ...