/** * @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);//窗口滚动监听
相关推荐
无需在初始页面加载时加载所有模板,可以使用带有一些支持包的iron:router按需加载模板。 使用numtel:publicsources ,可以使用处理所有其他源文件的相同包来处理public目录中的源文件。 有关延迟加载包的配置,...
ECT是一个新兴的JavaScript模板引擎,主要致力于性能表现。 ECT开发者称,与其他引擎(如Dust、Hogan.js、Fest、Handlebars.js、doT、Swig、Eco、EJS、CoffeeKup和Jade等)相比,ECT目前是最快的,见基准测试。你...
Velocity.js 是velocity模板语法的javascript实现。Velocity 是基于Java的模板引擎,广泛应用在阿里集 体各个子公司。Velocity模板适用于大量模板使用的场景,支持复杂的逻辑运算,包含 基本数据类型、变量赋值和...
JavaScript实现图片懒加载。图片懒加载是一种在页面加载时,延迟加载图片资源的技术,也就是说图片资源在需要的时候才会加载。
【JavaScript】图片延迟加载方案1
此模板搭载了轻量级的JavaScript动效,增强了页面的互动性和动感,同时通过Ajax技术实现了快速的页面加载和数据交换,为用户提供即时的服务反馈。借助于Vue.js或React等现代前端框架的应用,这份模板更是如虎添翼,...
用于AngularJS模板加载器将AngularJS模板包含在webpack Javascript Bundle中。 预加载AngularJS模板缓存,以删除模板的初始加载时间。 ngTemplate加载程序根本不会缩小或处理您HTML,而是使用诸如或类的标准加载。 ...
因为有ajax动态加载,所以下载后需要放到一个http服务器下运行才能看到效果。...动态加载功能用到了requirejs,以及requrejs的text。 主要文件是libs/route.js。 主要用法,大家可以看demo, 在app.js中有详细注释。
loadrunner, 浏览器的简单,灵活,灵活的JavaScript加载器和构建工具 Loadrunner是一个JavaScript依赖管理器。to开始作为我的科学项目脚本加载器和 MODULE 系统,但它转换为一般依赖项管理器来管理从CSS模板到DOM...
模板对象 javascript对象中的模板字符串。 轻量级实用程序模块。 (生产文件是1.29KB)安装npm $ npm install template-obj凉亭 $ bower install template-obj普通JS var templateObj = require("template-obj");...
通过由浅入深的讲解,你将学会如何构建具有丰富交互以及优雅体验的JavaScript应用,书中同样提供了大量的示例代码,可以帮助你更深入的理解很多重要的概念。 揭开MVC的神秘面纱,教你如何设计合理的架构以及处理...
《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面...
JavaScript 该模板是使用JavaScript编写的。 对于此模板的版本,请转到 。调试该模板支持使用以下任何一种技术进行调试:问题和意见我们很乐意收到您对此样本的反馈。 您可以在此存储库的“问题”部分中将您的反馈...
JavaScript模板 内容 描述 1KB轻量,快速且强大JavaScript模板引擎,零依赖。 与类的服务器端环境, 或类的模块加载器以及所有Web浏览器。 用法 客户端 使用安装blueimp-tmpl软件包: npm install blueimp-tmpl 在...
欢迎使用 JavaScript 后台管理框架 - AMF AMF-可应用于网站后台、系统管理等领域。...06) 模板: 支持多模板设计,结合后端程序轻松实现模板切换。 07) 其它: 使用简单。架构合理。统一的流程控制管理机制等...
4. 支持动态交互:模板通常会包含 JavaScript 代码,支持动态交互,例如表单验证、异步加载等。 5. 提高开发效率:使用模板可以大大提高开发效率,减少重复工作,让开发者更专注于业务逻辑的实现。 总之,网站前端...
Locator-micro 是定位器的...使用 Locator-micro,你将不需要下载完整的微分析器组件或模板,就可以通过执行加载程序中加载模块提供的微模板中的 javascript 函数,生成一个 html 片段的形式。 标签:locator
JavaScript 资源大全中文版,内容包括:包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎等
模板加载对象,简化并优化前端开发的小工具
非常适合从外部源加载模板文字字符串。 特征 ECMAScript模块 包含CommonJS捆绑包 兼容打字稿 小足迹(1K) 安装 npm install @vanillaes/interpolate import interpolate from '@vanillaes/interpolate' ; 插() ...