LazyLoad.js及scrollLoading.js

浏览数：34 / 时间：2015年06月09日

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文件实现真实延迟加载，本人比较懒，就直接在网上找了一个修改好的，嘿嘿

 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             //删除的代码

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