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