[javascript] javascript 实现数据滚动加载
2015-12-18 11:06
543 查看
// tpl generate var tmpl = (function (cache, $) { return function (str, data) { var fn = !/\s/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : function (data) { var i, variable = [$], value = [ [] ]; for (i in data) { variable.push(i); value.push(data[i]); }; return (new Function(variable, fn.$)).apply(data, value).join(""); }; fn.$ = fn.$ || $ + ".push('" + str.replace(/\\/g, "\\\\") .replace(/[\r\t\n]/g, " ") .split("<%") .join("\t") .replace(/((^|%>)[^\t]*)'/g, "$1\r") .replace(/\t=(.*?)%>/g, "',$1,'") .split("\t") .join("');\n") .split("%>") .join($ + ".push('") .split("\r") .join("\\'") + "');return " + $; return data ? fn(data) : fn; } })({}, '$' + (+new Date)); // invoking function tmpl: function(html_tmpl , json_data){ var func_render = tmpl(html_tmpl); return func_render(json_data); }, // scroll-page-to-get-more-data 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) { //加载数据... console.log('first time'); 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; } } });
相关文章推荐
- javascript的BOM对象
- json_encode 中文被转义
- 最简单的JavaScript图片轮播代码(两种方法)
- JS弹出对话框实现方法(三种方式)
- arcgis api for javascript (1) 基本的地图显示及spatialReference
- JavaScript判断字符串是否全为数字
- JS彻底清除Cookie
- JavaScript计划任务后台运行的方法
- Ext.js5的列冻结(5)
- js中的坑
- html页面中引入ionic.bundle.min.js正常,但是引入ionic.bundle.js报错Invalid regular expression
- Ext.js5的分组表格(4)
- Javascript Window Location
- Alamofire json Alamofire2.0使用
- Gson解析(List和Map)格式json数据
- JSTL标签库
- JavaScript_DOM编程艺术第二版学习笔记-第8章
- [连载]JavaScript讲义(04)--- 函数和闭包
- 真正好用的js验证上传文件大小
- JSP/Servlet-----EL遍历Map