1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update image lazy loading

This commit is contained in:
Luke Pulverenti 2015-11-28 19:23:48 -05:00
parent 30f68bdf98
commit 7029c9112b
10 changed files with 74 additions and 76 deletions

View file

@ -1,8 +1,4 @@
(function ($) {
})(jQuery);
/**
/**
* jQuery Unveil
* A very lightweight jQuery plugin to lazy load images
* http://luis-almeida.github.com/unveil
@ -12,7 +8,7 @@
* https://github.com/luis-almeida
*/
(function ($) {
(function () {
/**
* Copyright 2012, Digital Fusion
@ -24,66 +20,34 @@
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
var $w = $(window);
var thresholdX = Math.max(screen.availWidth);
var thresholdY = Math.max(screen.availHeight);
function visibleInViewport(elem, partial, hidden, direction) {
function visibleInViewport(elem, partial) {
var t = elem,
vpWidth = $w.width(),
vpHeight = $w.height(),
direction = (direction) ? direction : 'both',
clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
thresholdX = thresholdX || 0;
thresholdY = thresholdY || 0;
if (typeof t.getBoundingClientRect === 'function') {
var vpWidth = window.innerWidth,
vpHeight = window.innerHeight;
// Use this native browser method, if available.
var rec = t.getBoundingClientRect(),
tViz = rec.top >= 0 && rec.top < vpHeight + thresholdY,
bViz = rec.bottom > 0 && rec.bottom <= vpHeight + thresholdY,
lViz = rec.left >= 0 && rec.left < vpWidth + thresholdX,
rViz = rec.right > 0 && rec.right <= vpWidth + thresholdX,
vVisible = partial ? tViz || bViz : tViz && bViz,
hVisible = partial ? lViz || rViz : lViz && rViz;
// Use this native browser method, if available.
var rec = elem.getBoundingClientRect(),
tViz = rec.top >= 0 && rec.top < vpHeight + thresholdY,
bViz = rec.bottom > 0 && rec.bottom <= vpHeight + thresholdY,
lViz = rec.left >= 0 && rec.left < vpWidth + thresholdX,
rViz = rec.right > 0 && rec.right <= vpWidth + thresholdX,
vVisible = partial ? tViz || bViz : tViz && bViz,
hVisible = partial ? lViz || rViz : lViz && rViz;
if (direction === 'both')
return clientSize && vVisible && hVisible;
else if (direction === 'vertical')
return clientSize && vVisible;
else if (direction === 'horizontal')
return clientSize && hVisible;
} else {
var $t = $(elem);
var viewTop = $w.scrollTop(),
viewBottom = viewTop + vpHeight,
viewLeft = $w.scrollLeft(),
viewRight = viewLeft + vpWidth,
offset = $t.offset(),
_top = offset.top,
_bottom = _top + $t.height(),
_left = offset.left,
_right = _left + $t.width(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom,
compareLeft = partial === true ? _right : _left,
compareRight = partial === true ? _left : _right;
if (direction === 'both')
return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
else if (direction === 'vertical')
return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
else if (direction === 'horizontal')
return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
}
return vVisible && hVisible;
}
var unveilId = 0;
function isVisible(elem) {
return visibleInViewport(elem, true, false, 'both');
return visibleInViewport(elem, true);
}
function fillImage(elem) {
@ -145,7 +109,7 @@
}
function bindEvent(elems, method, name, fn) {
for (var i = 0, length = elems.length; i < length; i++) {
elems[i][method](name, fn);
}
@ -168,16 +132,6 @@
unveilElements(elem.getElementsByClassName('lazy'), elem);
}
$.fn.lazyChildren = function () {
if (this.length == 1) {
lazyChildren(this[0]);
} else {
unveilElements($('.lazy', this));
}
return this;
};
function lazyImage(elem, url) {
elem.setAttribute('data-src', url);
@ -190,7 +144,7 @@
lazyChildren: lazyChildren
};
})(window.jQuery || window.Zepto);
})();
(function () {
@ -227,7 +181,6 @@
self.setImageInto = setImageIntoElement;
}
console.log('creating simpleImageStore');
window.ImageStore = new simpleImageStore();
})();