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

                    
     
    
     
    
     
        
      
                   Green
      
        
      
                   Lime
      
        
      
                   Maroon
      
        
      
                   Olive
      
        
      
                   Red
      
        
      
                   ButtonFace
      
        
      
                   Aqua
      
        
      
                   AppWorkspace