• [转]LazyLoad.js及scrollLoading.js

    本文转自：http://blog.csdn.net/ning109314/article/details/7042829

    目前图片延迟加载主要分两大块，一是触发加载（根据滚动条位置加载图片）；二是自动预加载（加载完首屏后n秒后自动加载其他位置的图片）。现在最流行使用的就是LazyLoad.js及scrollLoading.js这两个用Jquery写的小插件。

    一、LazyLoad实现：

    <script type="text/javascript" src="/js/lazyload/jquery.min.js"></script> < script type="text/javascript" src="/js/lazyload/lazyload.js"></script> < script type="text/javascript"> jQuery(document).ready( function($){ $("img").lazyload({ effect : "fadeIn" }); }); < /script>

    网上找到一个更好点的处理方式，以下方式转自http://www.poluoluo.com/jzxy/201110/145261.html：

    <script type="text/javascript">

    //首先用JQ判断浏览器类型及版本，如果是IE8以下的浏览器就用effect=show，否则就用effect=fadeIn，判断浏览器版本函数如下 function checkbrowse() { var ua = navigator.userAgent.toLowerCase(); var is = (ua.match(/(chrome|opera|safari|msie|firefox)/) || ['', '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 } }

    //改造Jquery.LazyLoad.js函数，根据浏览器版本来显示不同的滤镜效果 var public = checkbrowse(); var showeffect = ""; if ((public['is'] == 'msie' && public['ver'] < 8.0)) { showeffect = "show" } else { showeffect = "fadeIn" } jQuery(document).ready(function($) { $("img").lazyload({ placeholder: "http://demo.jb51.net/js/2011/lazyload/Js/lazyload/grey.gif", effect: showeffect, failurelimit: 10 }) }); < /script>

    html:

    <img    src="/js/lazyload/pixel.gif" original="真实图片路径" />

    而LazyLoad只是给你一个延迟加载的假象，每次图片都会加载两次，完全就是一个假象的延迟加载。可以修改LazyLoad文件实现真实延迟加载，本人比较懒，就直接在网上找了一个修改好的，嘿嘿

    [javascript] view plaincopyprint?
    1. /* 
    2. * Lazy Load - jQuery plugin for lazy loading images 
    3. * 
    4. * Copyright (c) 2007-2009 Mika Tuupola 
    5. * 
    6. * Licensed under the MIT license: 
    7. *   http://www.opensource.org/licenses/mit-license.php 
    8. * 
    9. * Project home: 
    10. *   http://www.appelsiini.net/projects/lazyload 
    11. * 
    12. * Version:  1.5.0 
    13. * 
    14. */  
    15. (function ($) {  
    16.     $.fn.lazyload = function (options) {  
    17.         var settings = {  
    18.             threshold: 0,  
    19.             failurelimit: 0,  
    20.             event: "scroll",  
    21.             effect: "show",  
    22.             container: window  
    23.         };  
    24.         if (options) {  
    25.             $.extend(settings, options);  
    26.         }  
    27.         /* Fire one scroll event per scroll. Not one scroll event per image. */  
    28.         var elements = this;  
    29.         if ("scroll" == settings.event) {  
    30.             $(settings.container).bind("scroll", function (event) {  
    31.                 var counter = 0;  
    32.                 elements.each(function () {  
    33.                     if ($.abovethetop(this, settings) ||  
    34. $.leftofbegin(this, settings)) {  
    35.                         /* Nothing. */  
    36.                     } else if (!$.belowthefold(this, settings) &&  
    37. !$.rightoffold(this, settings)) {  
    38.                         $(this).trigger("appear");  
    39.                     } else {  
    40.                         if (counter++ > settings.failurelimit) {  
    41.                             return false;  
    42.                         }  
    43.                     }  
    44.                 });  
    45.                 /* Remove image from array so it is not looped next time. */  
    46.                 var temp = $.grep(elements, function (element) {  
    47.                     return !element.loaded;  
    48.                 });  
    49.                 elements = $(temp);  
    50.             });  
    51.         }  
    52.         this.each(function () {  
    53.             var self = this;  
    54.             //删除的代码  
    /*
* 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 ($) {
    $.fn.lazyload = function (options) {
        var settings = {
            threshold: 0,
            failurelimit: 0,
            event: "scroll",
            effect: "show",
            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;
            //删除的代码
    [javascript] view plaincopyprint?
    1.             /* When appear is triggered load original image. */  
    2.             $(self).one("appear", function () {  
    3.                 if (!this.loaded) {  
    4.                     $("<img />")  
    5. .bind("load", function () {  
    6.     $(self)  
    7. .hide()  
    8. .attr("src", $(self).attr("original"))  
    9. [settings.effect](settings.effectspeed);  
    10.     self.loaded = true;  
    11. })  
    12. .attr("src", $(self).attr("original"));  
    13.                 };  
    14.             });  
    15.             /* When wanted event is triggered load original image */  
    16.             /* by triggering appear.                              */  
    17.             if ("scroll" != settings.event) {  
    18.                 $(self).bind(settings.event, function (event) {  
    19.                     if (!self.loaded) {  
    20.                         $(self).trigger("appear");  
    21.                     }  
    22.                 });  
    23.             }  
    24.         });  
    25.         /* Force initial check if images should appear. */  
    26.         $(settings.container).trigger(settings.event);  
    27.         return this;  
    28.     };  
    29.     /* Convenience methods in jQuery namespace.           */  
    30.     /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */  
    31.     $.belowthefold = function (element, settings) {  
    32.         if (settings.container === undefined || settings.container === window) {  
    33.             var fold = $(window).height() + $(window).scrollTop();  
    34.         } else {  
    35.             var fold = $(settings.container).offset().top + $(settings.container).height();  
    36.         }  
    37.         return fold <= $(element).offset().top - settings.threshold;  
    38.     };  
    39.     $.rightoffold = function (element, settings) {  
    40.         if (settings.container === undefined || settings.container === window) {  
    41.             var fold = $(window).width() + $(window).scrollLeft();  
    42.         } else {  
    43.             var fold = $(settings.container).offset().left + $(settings.container).width();  
    44.         }  
    45.         return fold <= $(element).offset().left - settings.threshold;  
    46.     };  
    47.     $.abovethetop = function (element, settings) {  
    48.         if (settings.container === undefined || settings.container === window) {  
    49.             var fold = $(window).scrollTop();  
    50.         } else {  
    51.             var fold = $(settings.container).offset().top;  
    52.         }  
    53.         return fold >= $(element).offset().top + settings.threshold + $(element).height();  
    54.     };  
    55.     $.leftofbegin = function (element, settings) {  
    56.         if (settings.container === undefined || settings.container === window) {  
    57.             var fold = $(window).scrollLeft();  
    58.         } else {  
    59.             var fold = $(settings.container).offset().left;  
    60.         }  
    61.         return fold >= $(element).offset().left + settings.threshold + $(element).width();  
    62.     };  
    63.     /* Custom selectors for your convenience.   */  
    64.     /* Use as $("img:below-the-fold").something() */  
    65.     $.extend($.expr[':'], {  
    66.         "below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",  
    67.         "above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",  
    68.         "right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",  
    69.         "left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"  
    70.     });  
    71. })(jQuery);  
                /* 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);

    二、scrollLoading实现

    <script src="/js/lazyload/jquery.scrollLoading.js" type="text/javascript"></script><script type="text/javascript" src="/js/lazyload//jquery_002.js"></script> < script type="text/javascript" src="/js/lazyload//jquery.js"></script> < script> $(function() {  $(".scrollLoading").scrollLoading();  }); < /script>

    HTML：

    <img class="scrollLoading" style="background: url(&quot;/js/lazyload/pixel.gif&quot;) no-repeat scroll center center transparent;" src="/js/lazyload/pixel.gif" style="WIDTH: 526px; HEIGHT: 293px" data-url="真实路径"/>

    scrollLoading的实现相对而言比较麻烦一下

    如果需要对应的JS包请去下载：

    http://download.csdn.net/detail/ning109314/3882760
  • 相关阅读:
    IO复用三种方式
    sql server如何通过pivot对数据进行行列转换（进阶）
    sql server排序规则冲突问题解决
    sql server如何通过pivot对数据进行行列转换
    sql server如何通过排序控制insert into ... select ... 语句的记录插入顺序
    sql server如何用不同语种语言显示报错的错误消息
    Python编程求解第1天1分钱之后每天两倍持续一个月的等比数列问题
    sql server临时删除/禁用非聚集索引并重新创建加回/启用的简便编程方法研究对比
    sql server通过临时存储过程实现使用参数添加文件组脚本复用
    sql server重建全库索引和更新全库统计信息通用脚本
  • 原文地址：https://www.cnblogs.com/freeliver54/p/3623793.html
Copyright © 2020-2023  润新知