web性能优化之- js自定义函数延迟执行 jquery插件
来源:互联网 发布:中国人长相知乎 编辑:程序博客网 时间:2024/03/28 18:39
今天碰到一个很奇快的需求,大致如下:html页面有很多div容器,每个div容器的数据都是通过ajax请求来处理的。一般情况处理ajax请都在windows的load事件中,由于页面的div容器太多造成windows的load事件中ajax请求太多;所以我们只需要处理那些在浏览器中看得见的div容器。假如我们现在有10个div容器,每个屏幕刚好显示1个div容器,如果我们放到windows的load事件中,那么刚开始就有10个ajax请求。其实用户可能根本不会看到后面几个div容器,所以我们通过这个插件来延迟这些ajax的请求,刚加载页面有1个或2个ajax请求,当滚动条滚到相应div的时候,div再发起ajax请求。
jquery.lazyevent.js插件源代码:
(function ($, window) { var $window = $(window); $.fn.lazyevent = function (options) { var elements = this; var settings = { threshold: 0, event: "scroll", container: window, skip_invisible: true, fn: null, data: null }; function update() { var counter = 0; elements.each(function () { var $this = $(this); if (settings.skip_invisible && !$this.is(":visible")) { return; } /* if (!belowthefold(this, settings) && !rightoffold(this, settings)) { $this.trigger("fire"); }*/ if (inviewport(this, settings)) { $this.trigger("fire"); } }); } if (options) { $.extend(settings, options); } var $container = (settings.container === undefined || settings.container === window) ? $window : $(settings.container); if (0 === settings.event.indexOf("scroll")) { $container.bind(settings.event, function (event) { return update(); }); } this.each(function () { var self = this; var $self = $(self); self.fired = false; $self.one("fire", function () { if (!this.fired) { if (settings.fn) { settings.fn.call(self, settings.data); } self.fired = true; var temp = $.grep(elements, function (element) { return !element.fired; }); elements = $(temp); } }); if (0 !== settings.event.indexOf("scroll")) { $self.bind(settings.event, function (event) { if (!self.fired) { $self.trigger("fire"); } }); } }); $window.bind("resize", function (event) { update(); }); var belowthefold = function (element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = $window.height() + $window.scrollTop(); } else { fold = $container.offset().top + $container.height(); } return fold <= $(element).offset().top - settings.threshold; }; var rightoffold = function (element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = $window.width() + $window.scrollLeft(); } else { fold = $container.offset().left + $container.width(); } return fold <= $(element).offset().left - settings.threshold; }; var abovethetop = function (element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = $window.scrollTop(); } else { fold = $container.offset().top; } return fold >= $(element).offset().top + settings.threshold + $(element).height(); }; var leftofbegin = function (element, settings) { var fold; if (settings.container === undefined || settings.container === window) { fold = $window.scrollLeft(); } else { fold = $container.offset().left; } return fold >= $(element).offset().left + settings.threshold + $(element).width(); }; var inviewport = function (element, settings) { return !abovethetop(element, settings) && !leftofbegin(element, settings) && !belowthefold(element, settings) && !rightoffold(element, settings); }; update(); return this; };})(jQuery, window);
jquery.lazyevent..min.js代码:
(function(a,c){var b=a(c);a.fn.lazyevent=function(j){var g=this;var l={threshold:0,event:"scroll",container:c,skip_invisible:true,fn:null,data:null};function m(){var n=0;g.each(function(){var o=a(this);if(l.skip_invisible&&!o.is(":visible")){return}if(h(this,l)){o.trigger("fire")}})}if(j){a.extend(l,j)}var d=(l.container===undefined||l.container===c)?b:a(l.container);if(0===l.event.indexOf("scroll")){d.bind(l.event,function(n){return m()})}this.each(function(){var o=this;var n=a(o);o.fired=false;n.one("fire",function(){if(!this.fired){if(l.fn){l.fn.call(o,l.data)}o.fired=true;var p=a.grep(g,function(q){return !q.fired});g=a(p)}});if(0!==l.event.indexOf("scroll")){n.bind(l.event,function(p){if(!o.fired){n.trigger("fire")}})}});b.bind("resize",function(n){m()});var f=function(n,p){var o;if(p.container===undefined||p.container===c){o=b.height()+b.scrollTop()}else{o=d.offset().top+d.height()}return o<=a(n).offset().top-p.threshold};var k=function(n,p){var o;if(p.container===undefined||p.container===c){o=b.width()+b.scrollLeft()}else{o=d.offset().left+d.width()}return o<=a(n).offset().left-p.threshold};var e=function(n,p){var o;if(p.container===undefined||p.container===c){o=b.scrollTop()}else{o=d.offset().top}return o>=a(n).offset().top+p.threshold+a(n).height()};var i=function(n,p){var o;if(p.container===undefined||p.container===c){o=b.scrollLeft()}else{o=d.offset().left}return o>=a(n).offset().left+p.threshold+a(n).width()};var h=function(n,o){return !e(n,o)&&!i(n,o)&&!f(n,o)&&!k(n,o)};m();return this}})(jQuery,window);
html调用代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>lazyevent</title> <script type="text/javascript" src="Scripts/jquery-1.7.js"></script> <script type="text/javascript" src="Scripts/jquery.lazyevent.js"></script> <style type="text/css"> /* .test { height: 500px; display: inline-block; width: 4000px; } .test div { float: left; } */.test div { width: 500px; height: 500px; } </style></head><body> <div style="height: 200px"> </div> <div class="test"> <div style="background-color: Green"> Green</div> <div style="background-color: Lime"> Lime</div> <div style="background-color: Maroon; display:none"> Maroon</div> <div style="background-color: Olive"> Olive</div> <div style="background-color: Red; display: none"> Red</div> <div style="background-color: ButtonFace"> ButtonFace</div> <div style="background-color: Aqua"> Aqua</div> <div style="background-color: AppWorkspace"> AppWorkspace</div> </div> <script type="text/javascript"> $(function () { $(".test div").lazyevent({ data: "hello word", fn: function (data) { var html = $(this).html(); alert(data + ":" + html); } }); }); </script></body></html>
- web性能优化之- js自定义函数延迟执行 jquery插件
- web优化之-js 异步加载 js延迟执行 js插件
- web优化之-js 异步加载 js延迟执行 js插件
- Web性能优化:延迟加载JS
- js Date自定义函数 延迟脚本执行
- js延迟执行函数
- Web性能优化系列(3):如何延迟加载JS
- js时间延迟执行函数
- js时间延迟执行函数
- js时间延迟执行函数
- js性能优化之函数缓存
- js性能优化之函数节流
- js性能优化之分时函数
- js性能优化之惰性加载函数
- jQuery图片延迟加载插件lazyload.js
- web优化之-asp.net js延迟加载 js动态合并 js动态压缩
- 【Hibernate】性能优化之延迟加载机制
- MySQL性能优化之 延迟关联
- 随机数生成问题分类以及题目汇总
- 指针
- 破解 VISTA & WIN7对直接磁盘写入的防护 win7 磁盘不可写 win7磁盘被写保护 win7磁盘写保护
- linux下使用write\send发送数据报 EAGAIN : Resource temporarily unavailable 错
- Macfee 卸载过程
- web性能优化之- js自定义函数延迟执行 jquery插件
- Oracle11g修改RAC SCAN IP
- iconv: 未知 189 处的非法输入序列
- 字符串转换为HTML字符的方法
- 50种方法巧妙优化你的SQL Server数据库
- assert(笔记)
- linux c/c++ 让自己写的程序在后台运行
- EditText使用详解
- huge、far、near指针的说明