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

作者：2023面试高手 | 2024-02-20 21:11:48

踩

jquery.lazyload.min.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="images/pixel.gif" width="630" height="420" 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="images/pixel.gif" width="630" height="420" 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="images/pixel.gif" width="630" height="420" 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="images/pixel.gif" width="630" height="420" 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="images/pixel.gif" width="630" height="420" 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="images/pixel.gif" width="630" height="420" 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="images/pixel.gif" width="630" height="420" 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="images/pixel.gif" width="630" height="420" 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="images/pixel.gif" width="630" height="420" 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="images/pixel.gif" width="630" height="420" 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(0));
            }
        };
        //动态显示数据
        var loading = function() {
            
            var contHeight = params.container.height();
            if (params.container.get(0) === 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 >= 0 && post < contHeight) || (posb > 0 && 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="images/loading.gif" width="630" height="420" />
    <br /><br /><br /><br /><br /><br />
    <img original="images/mm/2.jpg" src="images/loading.gif" width="630" height="420" />
    <br /><br /><br /><br /><br /><br />
    <img original="images/mm/3.jpg" src="images/loading.gif" width="630" height="420" />
    <br /><br /><br /><br /><br /><br />
    <img original="images/mm/4.jpg" src="images/loading.gif" width="630" height="420" />
    <br /><br /><br /><br /><br /><br />
    <img original="images/mm/5.jpg" src="images/loading.gif" width="630" height="420" />
    <br /><br /><br /><br /><br /><br />
    <img original="images/mm/6.jpg" src="images/loading.gif" width="630" height="420" />
    <br /><br /><br /><br /><br /><br />
    <img original="images/mm/7.jpg" src="images/loading.gif" width="630" height="420" />
    <br /><br /><br /><br /><br /><br />
    <img original="images/mm/8.jpg" src="images/loading.gif" width="630" height="420" />
    <br /><br /><br /><br /><br /><br />
    <img original="images/mm/9.jpg" src="images/loading.gif" width="630" height="420" />
    <br /><br /><br /><br /><br /><br />
    <img original="images/mm/10.jpg" src="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);

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/120907