https://pinglun.fx678.com/Home/js/jquery.lazyload.js

1/*
2 * Lazy Load - jQuery plugin for lazy loading images
3 *
4 * Copyright (c) 2007-2011 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.7.0-dev
13 *
14 */
15(function($) {
16    $.fn.lazyload = function(options) {
17        var settings = {
18            threshold       : 0,
19            failure_limit   : 0,
20            event           : "scroll",
21            effect          : "show",
22            container       : window,
23            skip_invisible  : true
24        };
25
26        if(options) {
27            /* Maintain BC for a couple of version. */
28            if (null !== options.failurelimit) {
29                options.failure_limit = options.failurelimit;
30                delete options.failurelimit;
31            }
32
33            $.extend(settings, options);
34        }
35
36        /* Fire one scroll event per scroll. Not one scroll event per image. */
37        var elements = this;
38        if (0 == settings.event.indexOf("scroll")) {
39            $(settings.container).bind(settings.event, function(event) {
40                var counter = 0;
41                elements.each(function() {
42                    if (settings.skip_invisible && !$(this).is(":visible")) return;
43                    if ($.abovethetop(this, settings) ||
44                        $.leftofbegin(this, settings)) {
45                        /* Nothing. */
46                    } else if (!$.belowthefold(this, settings) &&
47                        !$.rightoffold(this, settings)) {
48                        $(this).trigger("appear");
49                    } else {
50                        if (++counter > settings.failure_limit) {
51                            return false;
52                        }
53                    }
54                });
55
56                /* Remove image from array so it is not looped next time. */
57                var temp = $.grep(elements, function(element) {
58                    return !element.loaded;
59                });
60                elements = $(temp);
61
62            });
63        }
64
65        this.each(function() {
66            var self = this;
67            self.loaded = false;
68
69            /* When appear is triggered load original image. */
70            $(self).one("appear", function() {
71                if (!this.loaded) {
72                    $("<img />")
73                        .bind("load", function() {
74                            $(self)
75                                .hide()
76                                .attr("src", $(self).data("original"))
77                                [settings.effect](settings.effectspeed);
78                            self.loaded = true;
79                        })
80                        .attr("src", $(self).data("original"));
81                };
82            });
83
84            /* When wanted event is triggered load original image */
85            /* by triggering appear.                              */
86            if (0 != settings.event.indexOf("scroll")) {
87                $(self).bind(settings.event, function(event) {
88                    if (!self.loaded) {
89                        $(self).trigger("appear");
90                    }
91                });
92            }
93        });
94
95        /* Check if something appears when window is resized. */
96        $(window).bind("resize", function(event) {
97            $(settings.container).trigger(settings.event);
98        });
99
100        /* Force initial check if images should appear. */
101        $(settings.container).trigger(settings.event);
102
103        return this;
104
105    };
106
107    /* Convenience methods in jQuery namespace.           */
108    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
109
110    $.belowthefold = function(element, settings) {
111        if (settings.container === undefined || settings.container === window) {
112            var fold = $(window).height() + $(window).scrollTop();
113        } else {
114            var fold = $(settings.container).offset().top + $(settings.container).height();
115        }
116        return fold <= $(element).offset().top - settings.threshold;
117    };
118
119    $.rightoffold = function(element, settings) {
120        if (settings.container === undefined || settings.container === window) {
121            var fold = $(window).width() + $(window).scrollLeft();
122        } else {
123            var fold = $(settings.container).offset().left + $(settings.container).width();
124        }
125        return fold <= $(element).offset().left - settings.threshold;
126    };
127
128    $.abovethetop = function(element, settings) {
129        if (settings.container === undefined || settings.container === window) {
130            var fold = $(window).scrollTop();
131        } else {
132            var fold = $(settings.container).offset().top;
133        }
134        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
135    };
136
137    $.leftofbegin = function(element, settings) {
138        if (settings.container === undefined || settings.container === window) {
139            var fold = $(window).scrollLeft();
140        } else {
141            var fold = $(settings.container).offset().left;
142        }
143        return fold >= $(element).offset().left + settings.threshold + $(element).width();
144    };
145    /* Custom selectors for your convenience.   */
146    /* Use as $("img:below-the-fold").something() */
147
148    $.extend($.expr[':'], {
149        "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0, container: window}

149) },
150        "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0, container: window}) },
151        "right-of-fold"  : function(a) { return $.rightoffold(a, {threshold : 0, container: window}) },
152        "left-of-fold"   : function(a) { return !$.rightoffold(a, {threshold : 0, container: window}) }
153    });
154
155})(jQuery);