2014-04-08 11:22:03 -07:00
|
|
|
|
/**
|
|
|
|
|
* jQuery Unveil
|
|
|
|
|
* A very lightweight jQuery plugin to lazy load images
|
|
|
|
|
* http://luis-almeida.github.com/unveil
|
|
|
|
|
*
|
|
|
|
|
* Licensed under the MIT license.
|
|
|
|
|
* Copyright 2013 Luís Almeida
|
|
|
|
|
* https://github.com/luis-almeida
|
|
|
|
|
*/
|
|
|
|
|
|
2015-05-09 21:29:04 -07:00
|
|
|
|
(function ($) {
|
|
|
|
|
|
|
|
|
|
var unveilId = 0;
|
2014-04-08 11:22:03 -07:00
|
|
|
|
|
2015-05-12 21:55:19 -07:00
|
|
|
|
|
|
|
|
|
function getThreshold() {
|
|
|
|
|
|
2015-05-27 22:51:48 -07:00
|
|
|
|
// If less than 100, the search window ends up not getting images
|
|
|
|
|
// If less than 200, this happens on the home page
|
|
|
|
|
// Need to fix those before this can be set to 0
|
|
|
|
|
return 200;
|
2015-05-12 21:55:19 -07:00
|
|
|
|
}
|
2015-05-11 09:32:15 -07:00
|
|
|
|
|
|
|
|
|
$.fn.unveil = function () {
|
2014-04-08 11:22:03 -07:00
|
|
|
|
|
|
|
|
|
var $w = $(window),
|
2015-05-12 21:55:19 -07:00
|
|
|
|
th = getThreshold(),
|
2015-05-06 20:11:51 -07:00
|
|
|
|
attrib = "data-src",
|
2014-04-08 11:22:03 -07:00
|
|
|
|
images = this,
|
|
|
|
|
loaded;
|
|
|
|
|
|
2015-05-09 21:29:04 -07:00
|
|
|
|
unveilId++;
|
|
|
|
|
var eventNamespace = 'unveil' + unveilId;
|
|
|
|
|
|
2014-04-08 11:22:03 -07:00
|
|
|
|
this.one("unveil", function () {
|
2015-05-07 07:04:10 -07:00
|
|
|
|
var elem = this;
|
|
|
|
|
var source = elem.getAttribute(attrib);
|
2014-04-08 11:22:03 -07:00
|
|
|
|
if (source) {
|
2015-05-09 21:29:04 -07:00
|
|
|
|
ImageStore.setImageInto(elem, source);
|
2015-05-07 07:04:10 -07:00
|
|
|
|
elem.setAttribute("data-src", '');
|
2014-04-08 11:22:03 -07:00
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
function unveil() {
|
|
|
|
|
var inview = images.filter(function () {
|
|
|
|
|
var $e = $(this);
|
|
|
|
|
|
2015-05-09 21:29:04 -07:00
|
|
|
|
if ($e.is(":hidden")) return;
|
2014-04-08 11:22:03 -07:00
|
|
|
|
var wt = $w.scrollTop(),
|
|
|
|
|
wb = wt + $w.height(),
|
|
|
|
|
et = $e.offset().top,
|
|
|
|
|
eb = et + $e.height();
|
|
|
|
|
|
|
|
|
|
return eb >= wt - th && et <= wb + th;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
loaded = inview.trigger("unveil");
|
|
|
|
|
images = images.not(loaded);
|
2015-05-09 21:29:04 -07:00
|
|
|
|
|
|
|
|
|
if (!images.length) {
|
|
|
|
|
$w.off('scroll.' + eventNamespace);
|
|
|
|
|
$w.off('resize.' + eventNamespace);
|
|
|
|
|
}
|
2014-04-08 11:22:03 -07:00
|
|
|
|
}
|
|
|
|
|
|
2015-05-09 21:29:04 -07:00
|
|
|
|
$w.on('scroll.' + eventNamespace, unveil);
|
|
|
|
|
$w.on('resize.' + eventNamespace, unveil);
|
2014-04-08 11:22:03 -07:00
|
|
|
|
|
|
|
|
|
unveil();
|
|
|
|
|
|
|
|
|
|
return this;
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
2015-01-22 23:15:15 -07:00
|
|
|
|
$.fn.lazyChildren = function () {
|
|
|
|
|
|
2015-05-09 21:29:04 -07:00
|
|
|
|
var lazyItems = $(".lazy", this);
|
|
|
|
|
|
|
|
|
|
if (lazyItems.length) {
|
2015-05-11 09:32:15 -07:00
|
|
|
|
lazyItems.unveil();
|
2015-05-09 21:29:04 -07:00
|
|
|
|
}
|
|
|
|
|
|
2015-01-22 23:15:15 -07:00
|
|
|
|
return this;
|
|
|
|
|
};
|
|
|
|
|
|
2015-05-09 21:29:04 -07:00
|
|
|
|
$.fn.lazyImage = function (url) {
|
|
|
|
|
|
2015-05-11 09:32:15 -07:00
|
|
|
|
return this.attr('data-src', url).unveil();
|
2015-05-09 21:29:04 -07:00
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
})(window.jQuery || window.Zepto);
|
|
|
|
|
|
|
|
|
|
(function () {
|
|
|
|
|
|
2015-05-11 09:32:15 -07:00
|
|
|
|
function setImageIntoElement(elem, url) {
|
|
|
|
|
|
|
|
|
|
if (elem.tagName === "DIV") {
|
|
|
|
|
|
|
|
|
|
elem.style.backgroundImage = "url('" + url + "')";
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
elem.setAttribute("src", url);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2015-05-09 21:29:04 -07:00
|
|
|
|
function simpleImageStore() {
|
|
|
|
|
|
|
|
|
|
var self = this;
|
|
|
|
|
|
2015-05-11 09:32:15 -07:00
|
|
|
|
self.setImageInto = setImageIntoElement;
|
2015-05-09 21:29:04 -07:00
|
|
|
|
}
|
|
|
|
|
|
2015-05-12 21:55:19 -07:00
|
|
|
|
console.log('creating simpleImageStore');
|
|
|
|
|
window.ImageStore = new simpleImageStore();
|
|
|
|
|
|
2015-05-09 21:29:04 -07:00
|
|
|
|
})();
|