两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js

估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了，其中jquery.lazyload.js的调用方法因为有网友爆出的bug，改进了调用方法，另外修改了关于浏览器IE版本的判断。以下直接为代码，并没有什么修改。做个记号。

两种方法都采用jquery-1.8.3.min.js版本。

jquery.scrollLoading方法

html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

<script src="js/jquery-1.8.3.min.js"></script>

<script src="Scripts/jquery.scrollLoading.js"></script>

<script>

    $(function(){

        $(".scrollLoading").scrollLoading();

    });

</script>

</head>

<body>

    <h2>页面图片等元素滚动动态加载技术</h2>

    <br />

    <img class="scrollLoading" data-url="images/mm/00_00.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_01.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_02.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_03.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_04.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_05.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_06.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_07.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_08.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

    <br /><br /><br /><br /><br /><br />

    <img class="scrollLoading" data-url="images/mm/00_09.jpg" src="data:images/pixel.gif" width="" height="" style="background:url(images/loading.gif) no-repeat center;" />

</body>

</html>

/*!

 * jquery.scrollLoading.js

 * by zhangxinxu http://www.zhangxinxu.com/wordpress/?p=1259

 * 2010-11-19 v1.0

 * 2012-01-13 v1.1 偏移值计算修改 position → offset

 * 2012-09-25 v1.2 增加滚动容器参数, 回调参数

 * 2014-08-11 v1.3 修复设置滚动容器参数一些bug, 以及误删posb值的一些低级错误

*/

(function($) {

    $.fn.scrollLoading = function(options) {

        var defaults = {

            attr: "data-url",

            container: $(window),

            callback: $.noop

        };

        var params = $.extend({}, defaults, options || {});

        params.cache = [];

        $(this).each(function() {

            var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);

            //重组

            var data = {

                obj: $(this),

                tag: node,

                url: url

            };

            params.cache.push(data);

        });

        var callback = function(call) {

            if ($.isFunction(params.callback)) {

                params.callback.call(call.get());

            }

        };

        //动态显示数据

        var loading = function() {

            var contHeight = params.container.height();

            if (params.container.get() === window) {

                contop = $(window).scrollTop();

            } else {

                contop = params.container.offset().top;

            }        

            $.each(params.cache, function(i, data) {

                var o = data.obj, tag = data.tag, url = data.url, post, posb;

                if (o) {

                    post = o.offset().top - contop, posb = post + o.height();

                    if ((post >=  && post < contHeight) || (posb >  && posb <= contHeight)) {

                        if (url) {

                            //在浏览器窗口内

                            if (tag === "img") {

                                //图片，改变src

                                callback(o.attr("src", url));

                            } else {

                                o.load(url, {}, function() {

                                    callback(o);

                                });

                            }

                        } else {

                            // 无地址，直接触发回调

                            callback(o);

                        }

                        data.obj = null;

                    }

                }

            });

        };

        //事件触发

        //加载完毕即执行

        loading();

        //滚动执行

        params.container.bind("scroll", loading);

    };

})(jQuery);

jquery.lazyload.js方法

html

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title></title>

<script src="js/jquery-1.8.3.min.js"></script>

<script src="js/jquery.lazyload.js"></script>

<script>

    function checkbrowse() {

        var ua = navigator.userAgent.toLowerCase();

        var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1];

        var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)';

        var v = (ua.match(new RegExp(r)) || [])[1];

        jQuery.browser.is = is;

        jQuery.browser.ver = v;

        return {

            'is': jQuery.browser.is,

            'ver': jQuery.browser.ver

        }

    }

    var public = checkbrowse();

    var showeffect = "";

    if ((public['is'] == 'msie' && public['ver'] < 8.0)) {

        showeffect = "show"

    } else {

        showeffect = "fadeIn"

    } 

    $(function(){

        $("img").lazyload({

            threshold : 200,

            effect : showeffect

         });

    });

</script>

</head>

<body>

    <h2>页面图片等元素滚动动态加载技术</h2>

    <br />

    <img original="images/mm/1.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/2.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/3.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/4.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/5.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/6.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/7.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/8.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/9.jpg" src="data:images/loading.gif" width="630" height="420" />

    <br /><br /><br /><br /><br /><br />

    <img original="images/mm/10.jpg" src="data:images/loading.gif" width="630" height="420" />

</body>

</html>

/*

* Lazy Load - jQuery plugin for lazy loading images

*

* Copyright (c) 2007-2009 Mika Tuupola

*

* Licensed under the MIT license:

*   http://www.opensource.org/licenses/mit-license.php

*

* Project home:

*   http://www.appelsiini.net/projects/lazyload

*

* Version:  1.5.0

*

*/

(function ($) {
    //判断客户端浏览器

    function checkbrowse() {

        var ua = navigator.userAgent.toLowerCase();

        var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1];

        var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)';

        var v = (ua.match(new RegExp(r)) || [])[1];

        jQuery.browser.is = is;

        jQuery.browser.ver = v;

        return {

            'is': jQuery.browser.is,

            'ver': jQuery.browser.ver

        }

    }

    var public = checkbrowse();

    $.fn.lazyload = function (options) {

        var showeffect = "";

        if ((public['is'] == 'msie' && public['ver'] < 8.0)) {

            showeffect = "show";

        } else {

            showeffect = "fadeIn";

        }

        var settings = {

            threshold: 0,

            failurelimit: 0,

            event: "scroll",

            effect: showeffect,

            container: window

        };

        if (options) {

            $.extend(settings, options);

        }

        /* Fire one scroll event per scroll. Not one scroll event per image. */

        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)) {

                        /* Nothing. */

                    } else if (!$.belowthefold(this, settings) &&

!$.rightoffold(this, settings)) {

                        $(this).trigger("appear");

                    } else {

                        if (counter++ > settings.failurelimit) {

                            return false;

                        }

                    }

                });

                /* Remove image from array so it is not looped next time. */

                var temp = $.grep(elements, function (element) {

                    return !element.loaded;

                });

                elements = $(temp);

            });

        }

        this.each(function () {

            var self = this;

            //删除的代码

            /* When appear is triggered load original image. */

            $(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"));

                };

            });

            /* When wanted event is triggered load original image */

            /* by triggering appear.                              */

            if ("scroll" != settings.event) {

                $(self).bind(settings.event, function (event) {

                    if (!self.loaded) {

                        $(self).trigger("appear");

                    }

                });

            }

        });

        /* Force initial check if images should appear. */

        $(settings.container).trigger(settings.event);

        return this;

    };

    /* Convenience methods in jQuery namespace.           */

    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */

    $.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();

    };

    /* Custom selectors for your convenience.   */

    /* Use as $("img:below-the-fold").something() */

    $.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);

巴特西

两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js

最新文章

热门文章