LazyLoad.js及scrollLoading.js

来源：互联网发布：淘宝客通用计划有用吗编辑：程序博客网时间：2024/04/28 03:24

LazyLoad.js及scrollLoading.js

原文链接：http://blog.csdn.net/ning109314/article/details/7042829

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

一、LazyLoad实现：

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

//首先用JQ判断浏览器类型及版本，如果是IE8以下的浏览器就用effect=show，否则就用effect=fadeIn，判断浏览器版本函数如下
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
}
}

//改造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:

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

[javascript] view plaincopy
/* 
* 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 plaincopy
            /* 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实现

HTML：

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

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

http://download.csdn.net/detail/ning109314/3882760