欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

网页图片延迟加载特效,超越jquery.lazyload

香港高防(5G)机房 发布于 2011-07-04  
jquery教程

淘宝,QQ,还有当当,亚马逊之类网之类的都有这个效果,原理是分段加载图片,主要用于大型网站节省带宽,可是他们提供的东西压缩混淆看不清,还有的要基于什么雅虎的什么库,总之是很麻烦的,JQ的控件倒是够清晰了,只是还是没有达到节省网络带宽的效果,于是我在JQ懒加载控件上进行一些改进,改进以后的最大的特点就是调用方便,项目中不需要什么太多更改,而且JS文件也不大

1.本来这是一个给网站开发控件,需要类似于淘宝的列表页的效果,再往上找了好多的例子,后来就想直接用JQ的延迟控件,但是JQ的延迟控件只是加快了加载速度,没有省带宽,这一点是我的老大发现的,用的火狐测试过,最后没办法了,就只好想另外的办法,改进一下JQ,超越一下就好了,也就是说JQ的懒加载并没有实际提升图片的传输量,还是请各位把代码DOWN了以后验收 {http://www.appelsiini.net/projects/lazyload 这个是原来的querylazyload控件的下载地址}
2.本控件用法要注意
1.必须载入jquery: 
2.把下面贴的代码保存为JS文件
<script src="js/MinmyLazyload.js" type="text/javascript"></script>
添加引用
3.调用语句,和jquery一摸一样,也可以而这样调用,记得是在页面底部,</BODY>标签之前调用
<script type="text/javascript">$("img").lazyload(); </script> 
或者这样调用
<script type="text/javascript">$("img").lazyload({ placeholder: "images/blue-loading.gif", effect:"fadeIn" });</script>
当然你得先有一张blue-loading.gif的图片,然后得在images文件夹下面才可以这样调用,
effect设置显示效果,默认是SHOW的效果,
4.前台的IMG标签里不要放SRC,请放入original标签。比如

网页图片延迟加载特效,超越jquery.lazyload-图片1
网页图片延迟加载特效,超越jquery.lazyload-图片1
这样就不会在页面一打开的时候加载图片了,也是最关键的地方,或者说是项目的后台代码里面唯一需要改动的地方。
好,下面是代码放送

(function($) {
    $.fn.lazyload = function(options) {
        var settings = {
            threshold: 0,
            failurelimit: 0,
            event: "scroll",
            effect: "show",//默认效果为show
            container: window
        };
        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)
                        ) {
                        self.loaded = false;
                    }
                    else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                        self.loaded = false;
                        $(this).trigger("appear");
                    }
                    else {
                        self.loaded = true;
                        if (counter++ > settings.failurelimit) {
                            return false;
                        }
                    }
                });

                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }

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

            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });
        $(settings.container).trigger(settings.event);
        return this;
    };
 
    $.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);

貌似很难让人理解我在哪里优化了
先写清楚JQ地懒加载原理:
假设有10000张图片要在页面上显示,JQ的先一次性传送1W张图片到客户端,然后页面快速加载10张,
省下来了9990张图片的加载时间
我的控件原理:
先一次性传送10张图片到客户端,加载10张,
省下来了9990张图片的加载时间,
以及9990张图片的传送时间,这时候节省的网络流量是巨大的,
对大型网站来说,这些节省出的带宽可以干的事情就海了去了
也就是说我的控件第一次只是加载了1W个值为空的IMG标签,也就是一点点的字符串而已!
(IMG 标签里面的original属性不经过处理是不可能将服务器的图片下载到客户端上面去的!
但是如果用SRC标签图片绝对第一次就全部加载过去了,这个时候也就只能在页面加载速度上下功夫了)
不相信的可以用火狐浏览器查看图片请求,JQ控件绝对是一次传送完毕!)
 
顺便说一下我的测试JQ的方法
http://www.appelsiini.net/projects/lazyload/enabled.html 这个是JQ控件的测试地址,用火狐打开,打开firebug,然后监视图片的传输量,情况是一打开就把6张图片全部加载完毕,再拖动滚动条的时候,只是简单的执行加载功能,还是上图:

网页图片延迟加载特效,超越jquery.lazyload-图片2
网页图片延迟加载特效,超越jquery.lazyload-图片2

然后您可以测试我这份代码
其实再多说一句,
懒加载只是懒加载,不是懒传输

出一个新版本,解决了有点点卡的性能问题

(function($) {
    $.fn.lazyload = function(options) {
        var settings = {
            threshold: 0,
            failurelimit: 0,
            event: "scroll",
            effect: "show",
            container: window,
            original: "original",
            firstCount: 10, //第一次加载数量
            everyCount: 3,   //以后每次加载
            moveScrollTop: 100//每次移动多少像素加载
        };
        if (options) {
            $.extend(settings, options);
        }
        var elements = this;
        var self = this;
        var count = 0;
        if (settings.placeholder) {
            $(self).attr("src", settings.placeholder);
        }
        for (i = 0; i < settings.firstCount; i++) {
            var trueSrc = $(elements[i]).attr(settings.original);
            $(elements[i]).attr("src", trueSrc);
            $(elements[i]).attr(settings.original, "finish");
        }
        $(window).scroll(function() { 
           elements = $("img@[" + settings.original + "!='finish']"); //获取未加载图片集
           var i = 0;
            for (i = 0; i < settings.everyCount; i++) {
                var trueSrc = $(elements[i]).attr(settings.original);
                $(elements[i]).hide().attr("src", trueSrc)[settings.effect](settings.effectspeed);
               // $(elements[i]).attr("src", trueSrc);
                $(elements[i]).attr(settings.original, "finish");
                if (elements.length == 0) {
                    $(window).unbind("scroll");
                };
            }
            count++;
        });
        return false;
    };
})(jQuery);

本文出自零度科技转载请注明出处:http://www.ldisp.com/a/jquery/2011/jquery_lazyload.shtml

上一篇:JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
下一篇:jQuery SelectBox Plugin(jQuery下拉框插件)

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

953

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理