关于一个优秀的Jquery插件

来源：互联网发布：淘宝店铺贷款平台编辑：程序博客网时间：2024/05/21 12:44

前几天和同事在一块研究了一个jquery 的插件感觉用起来还不错

延迟加载插件是基于jquery 的

$(document).ready(function() { $("img[original]").lazyload({ placeholder: "http://image.369518.com/36936site/images/img_public/loading.gif" }); });

插件最重要的一个自定义事件便是

$(self).one("appear", function(){if(!this.loaded || 1 == 1){$("<img />").bind("load", function(){$(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed);self.loaded=true;}).attr("src", $(self).attr("original"));};})

该事件通过鼠标滚动操作

http://plugins.jquery.com/project/lazyload   获取该插件的其他信息

通过该插件可以实现类似QQ空间的延迟加载效果

修改过后的Lazyload

(function($) {    $.fn.lazyload= function(options) {        var settings = {threshold    : 0,            failurelimit : 0,            event        : "scroll",            effect       : "show",            container    : window,            handler:"/Handler/HReply.ashx"};        if(options) {            $.extend(settings,options);        }        var elements=this;        if("scroll"==settings.event) {            $(settings.container).bind("scroll", function(event) {                var counter=0;                elements.each( function() {                    if($.abovethetop(this,settings) ||                    $.leftofbegin(this,settings)) {                    } else if(!$.belowthefold(this,settings) &&                    !$.rightoffold(this,settings)) {                        $(this).trigger("appear");// Trigger Custom Event                    } else {                        if(counter++ > settings.failurelimit) {                            return false;                        }                    }                });                var temp = $.grep(elements, function(element) {                    return !element.loaded;                });                elements = $(temp);            });        }        this.each( function() {            //Reset all Objects Data            var self=this;            if(undefined==$(self).attr("original")) {                //$(self).attr("original", $(self).attr("src"));            }            if("scroll" != settings.event ||            undefined == $(self).attr("src") ||            "" == $(self).attr("src") ||            settings.placeholder == $(self).attr("src") ||            ($.abovethetop(self,settings) ||            $.leftofbegin(self,settings) ||            $.belowthefold(self,settings) ||            $.rightoffold(self,settings) )) {                if(settings.placeholder) {                    //$(self).attr("src", settings.placeholder);                } else {                    //$(self).removeAttr("src");                }                self.loaded=false;            } else {                self.loaded=true;            }            // Defined Custom Event            $(self).one("appear", function() {                //alert($(this))                if(!this.loaded || 1 == 1) {                    $.getJSON(settings.handler,{flag:+new Date(),cId:$(self).attr("title")}, function(Json) {                        //alert(Json[0].Reply)                        $.loadLazyData(self,Json)                    })                    self.loaded=true;                };            });            if("scroll"!=settings.event) {                $(self).bind(settings.event, function(event) {                    if(!self.loaded) {                        $(self).trigger("appear");                    }                });            }        });        $(settings.container).trigger(settings.event);        return this;    };    $.loadLazyData = function(element,Json) {        arrStr = '';                for(var index in Json) {            arrStr = arrStr + "<div style="/" mce_style="/""background:red/">"+Json[index].Reply+"<//div>"        }        $(element).after(arrStr);    }    $.belowthefold= function(element,settings) {        if(settings.container === undefined || settings.container === window) {            var fold = $(window).height() + $(window).scrollTop();        } else {            var fold = $(settings.container).offset().top + $(settings.container).height();        }        return fold <= $(element).offset().top - settings.threshold;    };    $.rightoffold= function(element,settings) {        if(settings.container === undefined || settings.container === window) {            var fold = $(window).width() + $(window).scrollLeft();        } else {            var fold = $(settings.container).offset().left + $(settings.container).width();        }        return fold <= $(element).offset().left - settings.threshold;    };    $.abovethetop= function(element,settings) {        if(settings.container === undefined || settings.container === window) {            var fold = $(window).scrollTop();        } else {            var fold = $(settings.container).offset().top;        }        return fold >= $(element).offset().top + settings.threshold  + $(element).height();    };    $.leftofbegin= function(element,settings) {        if(settings.container === undefined || settings.container === window) {            var fold = $(window).scrollLeft();        } else {            var fold = $(settings.container).offset().left;        }        return fold >= $(element).offset().left + settings.threshold + $(element).width();    };    $.extend($.expr[':'], {"below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",        "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",        "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"});})(jQuery);

页面调用方法

$( function() {    $("#CommenBtn").one("click", function() {        //    alert(ProductId);        var Handler = "/Handler/HComment.ashx";        $.getJSON(Handler,{flag:+new Date(),productId:ProductId}, function(Json) {            for(var i in Json) {                $("#Listcmt").append("<ul title="+Json[i].Id+" class=/"Itemcmt/"><li class=/"com_1/">"+Json[i].UserName+" 说： "+Json[i].AddDate+" <//li><li class=/"Itemcotent/">"+Json[i].Comment+"<//li> <//ul> ")            }            _doData();        });        function _doData(){          //Bind Each CommentItem        $(".Itemcmt").lazyload({            placeholder: "http://image.com/loading.gif"        });        //alert($(".Itemcmt").length)        };    })})