LazyLoad.js及scrollLoading.js

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