← Back to branch summary

~x3lectric/xbmc/svn-trunk

« back to all changes in this revision

Viewing changes to addons/webinterface.default/js/jquery.lazyload.js

  • Committer: jmarshallnz
  • Date: 2010-09-09 22:45:58 UTC
  • Revision ID: svn-v4:568bbfeb-2a22-0410-94d2-cc84cf5bfa90:trunk:33648
merged: r33383,r33386 from webinterface branch
added: extension point for web interfaces
fixed: forgotten file

Show diffs side-by-side

added added

removed removed

Lines of Context:
addons/webinterface.default/js/jquery.lazyload.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
 
 
16
(function($) {
 
17
 
 
18
    $.fn.lazyload = function(options) {
 
19
        var settings = {
 
20
            threshold    : 0,
 
21
            failurelimit : 0,
 
22
            event        : "scroll",
 
23
            effect       : "show",
 
24
            container    : window
 
25
        };
 
26
                
 
27
        if(options) {
 
28
            $.extend(settings, options);
 
29
        }
 
30
 
 
31
        /* Fire one scroll event per scroll. Not one scroll event per image. */
 
32
        var elements = this;
 
33
        if ("scroll" == settings.event) {
 
34
            $(settings.container).bind("scroll", function(event) {
 
35
                
 
36
                var counter = 0;
 
37
                elements.each(function() {
 
38
                    if ($.abovethetop(this, settings) ||
 
39
                        $.leftofbegin(this, settings)) {
 
40
                            /* Nothing. */
 
41
                    } else if (!$.belowthefold(this, settings) &&
 
42
                        !$.rightoffold(this, settings)) {
 
43
                            $(this).trigger("appear");
 
44
                    } else {
 
45
                        if (counter++ > settings.failurelimit) {
 
46
                            return false;
 
47
                        }
 
48
                    }
 
49
                });
 
50
                /* Remove image from array so it is not looped next time. */
 
51
                var temp = $.grep(elements, function(element) {
 
52
                    return !element.loaded;
 
53
                });
 
54
                elements = $(temp);
 
55
            });
 
56
        }
 
57
        
 
58
        this.each(function() {
 
59
            var self = this;
 
60
            
 
61
            /* Save original only if it is not defined in HTML. */
 
62
            if (undefined == $(self).attr("original")) {
 
63
                $(self).attr("original", $(self).attr("src"));     
 
64
            }
 
65
 
 
66
            if ("scroll" != settings.event || 
 
67
                    undefined == $(self).attr("src") || 
 
68
                    settings.placeholder == $(self).attr("src") || 
 
69
                    ($.abovethetop(self, settings) ||
 
70
                     $.leftofbegin(self, settings) || 
 
71
                     $.belowthefold(self, settings) || 
 
72
                     $.rightoffold(self, settings) )) {
 
73
                        
 
74
                if (settings.placeholder) {
 
75
                    $(self).attr("src", settings.placeholder);      
 
76
                } else {
 
77
                    $(self).removeAttr("src");
 
78
                }
 
79
                self.loaded = false;
 
80
            } else {
 
81
                self.loaded = true;
 
82
            }
 
83
            
 
84
            /* When appear is triggered load original image. */
 
85
            $(self).one("appear", function() {
 
86
                if (!this.loaded) {
 
87
                    $("<img />")
 
88
                        .bind("load", function() {
 
89
                            $(self)
 
90
                                .hide()
 
91
                                .attr("src", $(self).attr("original"))
 
92
                                [settings.effect](settings.effectspeed);
 
93
                            self.loaded = true;
 
94
                        })
 
95
                        .attr("src", $(self).attr("original"));
 
96
                };
 
97
            });
 
98
 
 
99
            /* When wanted event is triggered load original image */
 
100
            /* by triggering appear.                              */
 
101
            if ("scroll" != settings.event) {
 
102
                $(self).bind(settings.event, function(event) {
 
103
                    if (!self.loaded) {
 
104
                        $(self).trigger("appear");
 
105
                    }
 
106
                });
 
107
            }
 
108
        });
 
109
        
 
110
        /* Force initial check if images should appear. */
 
111
        $(settings.container).trigger(settings.event);
 
112
        
 
113
        return this;
 
114
 
 
115
    };
 
116
 
 
117
    /* Convenience methods in jQuery namespace.           */
 
118
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */
 
119
 
 
120
    $.belowthefold = function(element, settings) {
 
121
        if (settings.container === undefined || settings.container === window) {
 
122
            var fold = $(window).height() + $(window).scrollTop();
 
123
        } else {
 
124
            var fold = $(settings.container).offset().top + $(settings.container).height();
 
125
        }
 
126
        return fold <= $(element).offset().top - settings.threshold;
 
127
    };
 
128
    
 
129
    $.rightoffold = function(element, settings) {
 
130
        if (settings.container === undefined || settings.container === window) {
 
131
            var fold = $(window).width() + $(window).scrollLeft();
 
132
        } else {
 
133
            var fold = $(settings.container).offset().left + $(settings.container).width();
 
134
        }
 
135
        return fold <= $(element).offset().left - settings.threshold;
 
136
    };
 
137
        
 
138
    $.abovethetop = function(element, settings) {
 
139
        if (settings.container === undefined || settings.container === window) {
 
140
            var fold = $(window).scrollTop();
 
141
        } else {
 
142
            var fold = $(settings.container).offset().top;
 
143
        }
 
144
        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
 
145
    };
 
146
    
 
147
    $.leftofbegin = function(element, settings) {
 
148
        if (settings.container === undefined || settings.container === window) {
 
149
            var fold = $(window).scrollLeft();
 
150
        } else {
 
151
            var fold = $(settings.container).offset().left;
 
152
        }
 
153
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
 
154
    };
 
155
    /* Custom selectors for your convenience.   */
 
156
    /* Use as $("img:below-the-fold").something() */
 
157
 
 
158
    $.extend($.expr[':'], {
 
159
        "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
 
160
        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
 
161
        "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
 
162
        "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
 
163
    });
 
164
    
 
165
})(jQuery);
 
 
b'\\ No newline at end of file'