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

来源：岁月联盟 编辑：exp 时间：2012-07-05

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

[javascript]
(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); 
(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]
<!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> 
<!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>

 作者：dz45693
 

上一篇：如何在Renderer中设置属性
下一篇：Use Rhino to write SSJS(Server side javascript)

最近更新

随机推荐