/** * @author wsf 滚动按需加载 */ ; (function (w,$){ var jutil = null;//工具类 /** * 滚动按需加载对象 */ function demandLoader (){ this.startLoadFlag = {};//是否开始加载 this.allLoaded = false;//是否全部加载完成 //分批加载函数 this.batch = { "fun1":this.loadCustTree, "fun2":this.prevLoadActAndOpt, "fun3":this.prevLoadActAndOpt //等等 }; } /** * 原型对象 */ demandLoader.prototype = { constructor:demandLoader,//构造函数 //加载后台数据 getJson:function (url,param,callback,othargs){ var that = this; $.getJSON(url,param,function (data){ callback.call(that,data,othargs); }); }, //开始加载 startLoad:function(){ var scrolltop = arguments[0];//页面滚动高度 jutil = arguments[1];//jsUtil if(typeof idxpos != "object"){ return false; } var catalog1 = idxpos.h2IdxPos;//一级目录位置 var catalog2 = idxpos.h3IdxPos;//二级目录位置 this.loadCataCommon(catalog1, scrolltop);//一级目录延迟加载 this.loadCataCommon(catalog2, scrolltop);//二级目录延迟加载 }, // 目录公共加载方法 loadCataCommon : function(catalog, scrolltop) { for ( var i in catalog) { var cl = catalog[i];// 目录 var text = cl.text;// 加载哪一部分 var catalogtop = cl.top;// 目录位置(父目录) var difTop = scrolltop - catalogtop;// 高度差 if (difTop>0&&this.startLoadFlag[text] == undefined) { var loadFn = this.batch[text];// 加载处理函数 if (jutil.isFunction(loadFn)) { this.startLoadFlag[text] = "startload";// 开始加载 loadFn.call(this, text); } } } }, //加载客户关系树 loadCustTree:function (){ this.startLoadFlag[text] = "endload";//加载完成 this.endLoad();//加载结束 }, //加载收入信息 loadIncome:function (){ this.startLoadFlag[text] = "endload";//加载完成 this.endLoad();//加载结束 }, //预先加载活动,机会信息 prevLoadActAndOpt:function (text){ this.startLoadFlag[text] = "endload";//加载完成 this.endLoad();//加载结束 }, //加载地址信息 loadDz:function (text){ this.startLoadFlag[text] = "endload";//加载完成 this.endLoad();//加载结束 }, //结束加载 endLoad:function (){ $._initCatelogPos();//重新计算目录位置 this.allLoaded = true; for(var catalotnm in this.batch){ this.allLoaded = this.allLoaded && (this.startLoadFlag[catalotnm] == "endload"); } } } w.demandLoader = demandLoader;//外部调用入口 })(window,jQuery); 调用方式 /** * 窗口滚动事件 */ function winScroll(){ scrollTop = $(win).scrollTop(); if(!_demandLoader.allLoaded){ _demandLoader.custid = $("#custid").val();//当前客户id //还没有加载过 _jsUtils.throttle(function (){ _demandLoader.startLoad.call(_demandLoader,scrollTop,_jsUtils);//开始按需加载 },110); } } $(win).scroll(winScroll);//窗口滚动监听
相关推荐
在Vue.js和Sea.js结合的场景下,Vue Router可以与Sea.js协同工作,以实现按需加载模板和组件。首先,我们需要配置Vue Router,定义各个路由及其对应的组件。每个路由可以关联一个组件或者一个模板。然后,在路由匹配...
AngularJS,作为一个强大的前端JavaScript框架,提供了多种方法来实现按需加载JavaScript模块,从而减少初始加载时间。本示例"angular+require+angular-ui-router+angular-async-loader"正是这样一个实现方案,它...
9. **按需加载(Lazy Loading)**:在Web开发中,按需加载是指仅在需要时才加载资源,如JavaScript模块或大图片。这可以显著提升页面加载速度,优化用户体验,特别是在移动设备上。 压缩包文件名“react-pxq-master...
1. **性能优化**:启动加载模板可以减少网络请求,通过预加载和缓存关键资源来加速应用的初始化。 2. **用户体验提升**:快速呈现初始界面,让用户感觉应用响应迅速,提升满意度。 3. **模块化**:通过模板,可以...
这些模板为开发者提供了快速构建网站的基础框架,只需根据需求进行内容替换和个性化调整。模板设计通常遵循一定的设计原则,如一致性、清晰性和易用性,以确保用户友好的界面体验。 在实际应用中,理解并熟练掌握...
在自定义指令中,我们可以指定`templateUrl`属性来加载模板,例如: ```javascript app.directive('myDirective', function() { return { templateUrl: 'path/to/template.html' }; }); ``` 在这个例子中,...
在本文中,我们将深入探讨如何使用ArcGIS API for JavaScript 4.10版本来加载高德地图,并结合高德地图的影像数据,实现自定义的GaodeMapLayer模块。ArcGIS API for JavaScript是一个强大的Web GIS开发工具,它允许...
【标题】:“JavaScript项目实战模板”是针对JavaScript编程语言的一次深入实践,旨在提升开发者在实际项目中的应用能力。在JavaScript的世界里,项目实战是非常重要的一部分,它可以帮助学习者将理论知识转化为实际...
3. 如需加载标注,可能需要借助第三方库或自定义解决方案。 4. 配置交互性,如图形对象和信息模板。 需要注意的是,尽管ArcGIS API支持加载多种地图源,但直接使用谷歌地图可能涉及版权和使用条款的问题,所以在...
在这个模板中,JavaScript可能被用来处理表单验证、异步数据加载(AJAX)、页面路由等功能,提升用户体验。同时,JavaScript也可以与后端的Java通过API接口进行通信,实现数据的交换。 CSS(层叠样式表)则负责页面...
无需在初始页面加载时加载所有模板,可以使用带有一些支持包的iron:router按需加载模板。 使用numtel:publicsources ,可以使用处理所有其他源文件的相同包来处理public目录中的源文件。 有关延迟加载包的配置,...
JavaScript树形菜单是一种常见的网页交互元素,用于呈现...解压并研究这些文件,可以帮助你更好地理解和应用上述概念,快速创建自己的JavaScript树形菜单模板。记得根据实际需求调整和扩展代码,以满足不同场景的使用。
标题中的“Node.js-node(express)angularrequiregrunt按需加载自动压缩前后分离”涉及了几个关键的JavaScript技术,它们在现代Web开发中起着至关重要的作用。让我们逐一深入了解这些概念。 1. **Node.js**: Node.js...
在本项目中,"ajax加载数据模板"显然关注的是如何在SSM(Spring、SpringMVC、MyBatis)框架下利用Ajax实现数据的动态加载、增删改查以及分页功能。 首先,我们需要理解SSM框架。Spring是一个全面的企业级应用开发...
4. **延迟加载**:通过按需加载模板,可以减少初始页面加载时间,提高页面性能。 5. **事件处理**:一些模板加载对象可能集成事件处理机制,使开发者能直接在模板中定义事件处理器,增强交互性。 6. **错误处理**...
同时,合理使用性能优化技术,如减少网络请求、按需加载资源,也能提升小程序的运行效率。 7. **测试与调试**:开发完成后,需要进行多轮测试,确保所有功能正常运行。微信开发者工具提供了强大的调试工具,可以...
- **预加载策略选择**:根据资源的重要性和页面需求,选择合适的预加载策略,如优先级预加载、按需预加载等。 3. **资源加载进度模板**: - **Progress API**:HTML5提供了Progress Element,可以创建进度条,...
同时,通过AJAX(Asynchronous JavaScript and XML)技术,可以实现异步数据加载,使用户在查看“丰年中国”的成果时无需等待整个页面刷新。 在实际应用中,"丰年中国"这个主题可能包含多个页面,如首页、成就展示...
模块化与异步模块加载对于大型项目,使用模块化(如CommonJS, ES6模块)可以按需加载代码,减少初始加载的负担。AMD(Asynchronous Module Definition)和 RequireJS 提供了异步加载模块的能力,只有当模块需要时才...
【标题】"纯JavaScript, CSS, jQuery静态旅游网站模板"是一个专为旅游主题设计的网站模板,它完全基于前端技术JavaScript、CSS和jQuery构建。这个模板适用于那些希望创建无服务器、轻量级网页的开发者,或者是对前端...