页面性能优化 自定义事件延迟触发 jquery插件

今天碰到一个很奇快的需求，大致如下：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插件源代码:

 

Javascript代码 

1. (function ($, window) {  
2.  var $window = $(window);  
3.   
4.  $.fn.lazyevent = function (options) {  
5.  var elements = this;  
6.  var settings = {  
7.  threshold: 0,  
8.  event: "scroll",  
9.  container: window,  
10.  skip_invisible: true,  
11.  fn: null,  
12.  data: null  
13.  };  
14.  function update() {  
15.  var counter = 0;  
16.   
17.  elements.each(function () {  
18.  var $this = $(this);  
19.  if (settings.skip_invisible && !$this.is(":visible")) {  
20.  return;  
21.  }  
22.  /* if (!belowthefold(this, settings) && !rightoffold(this, settings)) { 
23.  $this.trigger("fire"); 
24.  }*/  
25.  if (inviewport(this, settings)) {  
26.  $this.trigger("fire");  
27.  }  
28.  });  
29.   
30.  }  
31.  if (options) {  
32.  $.extend(settings, options);  
33.  }  
34.  var $container = (settings.container === undefined || settings.container === window) ? $window : $(settings.container);  
35.   
36.  if (0 === settings.event.indexOf("scroll")) {  
37.  $container.bind(settings.event, function (event) { return update(); });  
38.  }  
39.  this.each(function () {  
40.  var self = this;  
41.  var $self = $(self);  
42.  self.fired = false;  
43.  $self.one("fire", function () {  
44.  if (!this.fired) {  
45.  if (settings.fn) {  
46.  settings.fn.call(self, settings.data);  
47.  }  
48.  self.fired = true;  
49.  var temp = $.grep(elements, function (element) { return !element.fired; });  
50.  elements = $(temp);  
51.  }  
52.  });  
53.   
54.  if (0 !== settings.event.indexOf("scroll")) {  
55.  $self.bind(settings.event, function (event) {  
56.  if (!self.fired) {  
57.  $self.trigger("fire");  
58.  }  
59.  });  
60.  }  
61.  });  
62.   
63.  $window.bind("resize", function (event) {  
64.  update();  
65.  });  
66.   
67.   
68.  var belowthefold = function (element, settings) {  
69.  var fold;  
70.   
71.  if (settings.container === undefined || settings.container === window) {  
72.  fold = $window.height() + $window.scrollTop();  
73.  } else {  
74.  fold = $container.offset().top + $container.height();  
75.  }  
76.  return fold <= $(element).offset().top - settings.threshold;  
77.  };  
78.   
79.  var rightoffold = function (element, settings) {  
80.  var fold;  
81.   
82.  if (settings.container === undefined || settings.container === window) {  
83.  fold = $window.width() + $window.scrollLeft();  
84.  } else {  
85.  fold = $container.offset().left + $container.width();  
86.  }  
87.   
88.  return fold <= $(element).offset().left - settings.threshold;  
89.  };  
90.  var abovethetop = function (element, settings) {  
91.  var fold;  
92.   
93.  if (settings.container === undefined || settings.container === window) {  
94.  fold = $window.scrollTop();  
95.  } else {  
96.  fold = $container.offset().top;  
97.  }  
98.   
99.  return fold >= $(element).offset().top + settings.threshold + $(element).height();  
100.  };  
101.   
102.  var leftofbegin = function (element, settings) {  
103.  var fold;  
104.   
105.  if (settings.container === undefined || settings.container === window) {  
106.  fold = $window.scrollLeft();  
107.  } else {  
108.  fold = $container.offset().left;  
109.  }  
110.   
111.  return fold >= $(element).offset().left + settings.threshold + $(element).width();  
112.  };  
113.  var inviewport = function (element, settings) {  
114.  return !abovethetop(element, settings) && !leftofbegin(element, settings) &&  
115.  !belowthefold(element, settings) && !rightoffold(element, settings);  
116.   
117.  };  
118.  update();  
119.  return this;  
120.  };  
121.   
122. })(jQuery, window);  

jquery.lazyevent..min.js代码：

 

Javascript代码 

1. (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调用代码：

 

 

Html代码 

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2. <html xmlns="http://www.w3.org/1999/xhtml">  
3. <head>  
4.  <title>lazyevent</title>  
5.  <script type="text/javascript" src="Scripts/jquery-1.7.js"></script>  
6.  <script type="text/javascript" src="Scripts/jquery.lazyevent.js"></script>  
7.  <style type="text/css">  
8.  /* .test  
9.  {  
10.  height: 500px;  
11.  display: inline-block;  
12.  width: 4000px;  
13.  }  
14.  .test div  
15.  {  
16.  float: left;  
17.  }  
18.  */.test div  
19.  {  
20.  width: 500px;  
21.  height: 500px;  
22.  }  
23.  </style>  
24. </head>  
25. <body>  
26.  <div style="height: 200px">  
27.  </div>  
28.  <div class="test">  
29.  <div style="background-color: Green">  
30.  Green</div>  
31.  <div style="background-color: Lime">  
32.  Lime</div>  
33.  <div style="background-color: Maroon; display:none">  
34.  Maroon</div>  
35.  <div style="background-color: Olive">  
36.  Olive</div>  
37.  <div style="background-color: Red; display: none">  
38.  Red</div>  
39.  <div style="background-color: ButtonFace">  
40.  ButtonFace</div>  
41.  <div style="background-color: Aqua">  
42.  Aqua</div>  
43.  <div style="background-color: AppWorkspace">  
44.  AppWorkspace</div>  
45.  </div>  
46.  <script type="text/javascript">  
47.  $(function () {  
48.  $(".test div").lazyevent({  
49.  data: "hello word",  
50.  fn: function (data) {  
51.  var html = $(this).html();  
52.  alert(data + ":" + html);  
53.  }  
54.  });  
55.  });  
56.  </script>  
57. </body>  
58. </html>