页面性能优化自定义事件延迟触发 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]
(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(); <

补充：web前端 , JavaScript ,

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

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