New file |
0,0 → 1,164 |
/* |
* Lazy Load - jQuery plugin for lazy loading images |
* |
* Copyright (c) 2007-2009 Mika Tuupola |
* |
* Licensed under the MIT license: |
* http://www.opensource.org/licenses/mit-license.php |
* |
* Project home: |
* http://www.appelsiini.net/projects/lazyload |
* |
* Version: 1.5.0 |
* |
*/ |
(function($) { |
|
$.fn.lazyload = function(options) { |
var settings = { |
threshold : 0, |
failurelimit : 0, |
event : "scroll", |
effect : "show", |
container : window |
}; |
|
if(options) { |
$.extend(settings, options); |
} |
|
/* Fire one scroll event per scroll. Not one scroll event per image. */ |
var elements = this; |
if ("scroll" == settings.event) { |
$(settings.container).bind("scroll", function(event) { |
|
var counter = 0; |
elements.each(function() { |
if ($.abovethetop(this, settings) || |
$.leftofbegin(this, settings)) { |
/* Nothing. */ |
} else if (!$.belowthefold(this, settings) && |
!$.rightoffold(this, settings)) { |
$(this).trigger("appear"); |
} else { |
if (counter++ > settings.failurelimit) { |
return false; |
} |
} |
}); |
/* Remove image from array so it is not looped next time. */ |
var temp = $.grep(elements, function(element) { |
return !element.loaded; |
}); |
elements = $(temp); |
}); |
} |
|
this.each(function() { |
var self = this; |
|
/* Save original only if it is not defined in HTML. */ |
if (undefined == $(self).attr("original")) { |
$(self).attr("original", $(self).attr("src")); |
} |
|
if ("scroll" != settings.event || |
undefined == $(self).attr("src") || |
settings.placeholder == $(self).attr("src") || |
($.abovethetop(self, settings) || |
$.leftofbegin(self, settings) || |
$.belowthefold(self, settings) || |
$.rightoffold(self, settings) )) { |
|
if (settings.placeholder) { |
$(self).attr("src", settings.placeholder); |
} else { |
$(self).removeAttr("src"); |
} |
self.loaded = false; |
} else { |
self.loaded = true; |
} |
|
/* When appear is triggered load original image. */ |
$(self).one("appear", function() { |
if (!this.loaded) { |
$("<img />") |
.bind("load", function() { |
$(self) |
.hide() |
.attr("src", $(self).attr("original")) |
[settings.effect](settings.effectspeed); |
self.loaded = true; |
}) |
.attr("src", $(self).attr("original")); |
}; |
}); |
|
/* When wanted event is triggered load original image */ |
/* by triggering appear. */ |
if ("scroll" != settings.event) { |
$(self).bind(settings.event, function(event) { |
if (!self.loaded) { |
$(self).trigger("appear"); |
} |
}); |
} |
}); |
|
/* Force initial check if images should appear. */ |
$(settings.container).trigger(settings.event); |
|
return this; |
|
}; |
|
/* Convenience methods in jQuery namespace. */ |
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */ |
|
$.belowthefold = function(element, settings) { |
if (settings.container === undefined || settings.container === window) { |
var fold = $(window).height() + $(window).scrollTop(); |
} else { |
var fold = $(settings.container).offset().top + $(settings.container).height(); |
} |
return fold <= $(element).offset().top - settings.threshold; |
}; |
|
$.rightoffold = function(element, settings) { |
if (settings.container === undefined || settings.container === window) { |
var fold = $(window).width() + $(window).scrollLeft(); |
} else { |
var fold = $(settings.container).offset().left + $(settings.container).width(); |
} |
return fold <= $(element).offset().left - settings.threshold; |
}; |
|
$.abovethetop = function(element, settings) { |
if (settings.container === undefined || settings.container === window) { |
var fold = $(window).scrollTop(); |
} else { |
var fold = $(settings.container).offset().top; |
} |
return fold >= $(element).offset().top + settings.threshold + $(element).height(); |
}; |
|
$.leftofbegin = function(element, settings) { |
if (settings.container === undefined || settings.container === window) { |
var fold = $(window).scrollLeft(); |
} else { |
var fold = $(settings.container).offset().left; |
} |
return fold >= $(element).offset().left + settings.threshold + $(element).width(); |
}; |
/* Custom selectors for your convenience. */ |
/* Use as $("img:below-the-fold").something() */ |
|
$.extend($.expr[':'], { |
"below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})", |
"above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})", |
"right-of-fold" : "$.rightoffold(a, {threshold : 0, container: window})", |
"left-of-fold" : "!$.rightoffold(a, {threshold : 0, container: window})" |
}); |
|
})(jQuery); |