]>
git.immae.eu Git - github/shaarli/Shaarli.git/blob - inc/jquery.lazyload-1.9.3.js
2 * Lazy Load - jQuery plugin for lazy loading images
4 * Copyright (c) 2007-2013 Mika Tuupola
6 * Licensed under the MIT license:
7 * http://www.opensource.org/licenses/mit-license.php
10 * http://www.appelsiini.net/projects/lazyload
16 (function($, window
, document
, undefined) {
17 var $window
= $(window
);
19 $.fn
.lazyload = function(options
) {
28 data_attribute : "original",
29 skip_invisible : true,
32 placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"
38 elements
.each(function() {
40 if (settings
.skip_invisible
&& !$this.is(":visible")) {
43 if ($.abovethetop(this, settings
) ||
44 $.leftofbegin(this, settings
)) {
46 } else if (!$.belowthefold(this, settings
) &&
47 !$.rightoffold(this, settings
)) {
48 $this.trigger("appear");
49 /* if we found an image we'll load, reset the counter */
52 if (++counter
> settings
.failure_limit
) {
61 /* Maintain BC for a couple of versions. */
62 if (undefined !== options
.failurelimit
) {
63 options
.failure_limit
= options
.failurelimit
;
64 delete options
.failurelimit
;
66 if (undefined !== options
.effectspeed
) {
67 options
.effect_speed
= options
.effectspeed
;
68 delete options
.effectspeed
;
71 $.extend(settings
, options
);
74 /* Cache container as jQuery as object. */
75 $container
= (settings
.container
=== undefined ||
76 settings
.container
=== window
) ? $window : $(settings
.container
);
78 /* Fire one scroll event per scroll. Not one scroll event per image. */
79 if (0 === settings
.event
.indexOf("scroll")) {
80 $container
.bind(settings
.event
, function() {
85 this.each(function() {
91 /* If no src attribute given use data:uri. */
92 if ($self
.attr("src") === undefined || $self
.attr("src") === false) {
93 if ($self
.is("img")) {
94 $self
.attr("src", settings
.placeholder
);
98 /* When appear is triggered load original image. */
99 $self
.one("appear", function() {
101 if (settings
.appear
) {
102 var elements_left
= elements
.length
;
103 settings
.appear
.call(self
, elements_left
, settings
);
106 .bind("load", function() {
108 var original
= $self
.attr("data-" + settings
.data_attribute
);
110 if ($self
.is("img")) {
111 $self
.attr("src", original
);
113 $self
.css("background-image", "url('" + original
+ "')");
115 $self
[settings
.effect
](settings
.effect_speed
);
119 /* Remove image from array so it is not looped next time. */
120 var temp
= $.grep(elements
, function(element
) {
121 return !element
.loaded
;
126 var elements_left
= elements
.length
;
127 settings
.load
.call(self
, elements_left
, settings
);
130 .attr("src", $self
.attr("data-" + settings
.data_attribute
));
134 /* When wanted event is triggered load original image */
135 /* by triggering appear. */
136 if (0 !== settings
.event
.indexOf("scroll")) {
137 $self
.bind(settings
.event
, function() {
139 $self
.trigger("appear");
145 /* Check if something appears when window is resized. */
146 $window
.bind("resize", function() {
150 /* With IOS5 force loading images when navigating with back button. */
151 /* Non optimal workaround. */
152 if ((/(?:iphone
|ipod
|ipad
).*os
5/gi
).test(navigator
.appVersion
)) {
153 $window
.bind("pageshow", function(event
) {
154 if (event
.originalEvent
&& event
.originalEvent
.persisted
) {
155 elements
.each(function() {
156 $(this).trigger("appear");
162 /* Force initial check if images should appear. */
163 $(document
).ready(function() {
170 /* Convenience methods in jQuery namespace. */
171 /* Use as $.belowthefold(element, {threshold : 100, container : window}) */
173 $.belowthefold = function(element
, settings
) {
176 if (settings
.container
=== undefined || settings
.container
=== window
) {
177 fold
= (window
.innerHeight
? window
.innerHeight : $window
.height()) + $window
.scrollTop();
179 fold
= $(settings
.container
).offset().top
+ $(settings
.container
).height();
182 return fold
<= $(element
).offset().top
- settings
.threshold
;
185 $.rightoffold = function(element
, settings
) {
188 if (settings
.container
=== undefined || settings
.container
=== window
) {
189 fold
= $window
.width() + $window
.scrollLeft();
191 fold
= $(settings
.container
).offset().left
+ $(settings
.container
).width();
194 return fold
<= $(element
).offset().left
- settings
.threshold
;
197 $.abovethetop = function(element
, settings
) {
200 if (settings
.container
=== undefined || settings
.container
=== window
) {
201 fold
= $window
.scrollTop();
203 fold
= $(settings
.container
).offset().top
;
206 return fold
>= $(element
).offset().top
+ settings
.threshold
+ $(element
).height();
209 $.leftofbegin = function(element
, settings
) {
212 if (settings
.container
=== undefined || settings
.container
=== window
) {
213 fold
= $window
.scrollLeft();
215 fold
= $(settings
.container
).offset().left
;
218 return fold
>= $(element
).offset().left
+ settings
.threshold
+ $(element
).width();
221 $.inviewport = function(element
, settings
) {
222 return !$.rightoffold(element
, settings
) && !$.leftofbegin(element
, settings
) &&
223 !$.belowthefold(element
, settings
) && !$.abovethetop(element
, settings
);
226 /* Custom selectors for your convenience. */
227 /* Use as $("img:below-the-fold").something() or */
228 /* $("img").filter(":below-the-fold").something() which is faster */
230 $.extend($.expr
[":"], {
231 "below-the-fold" : function(a
) { return $.belowthefold(a
, {threshold : 0}); },
232 "above-the-top" : function(a
) { return !$.belowthefold(a
, {threshold : 0}); },
233 "right-of-screen": function(a
) { return $.rightoffold(a
, {threshold : 0}); },
234 "left-of-screen" : function(a
) { return !$.rightoffold(a
, {threshold : 0}); },
235 "in-viewport" : function(a
) { return $.inviewport(a
, {threshold : 0}); },
236 /* Maintain BC for couple of versions. */
237 "above-the-fold" : function(a
) { return !$.belowthefold(a
, {threshold : 0}); },
238 "right-of-fold" : function(a
) { return $.rightoffold(a
, {threshold : 0}); },
239 "left-of-fold" : function(a
) { return !$.rightoffold(a
, {threshold : 0}); }
242 })(jQuery
, window
, document
);