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:
parent
30f68bdf98
commit
7029c9112b
10 changed files with 74 additions and 76 deletions
85
dashboard-ui/thirdparty/jquery.unveil-custom.js
vendored
85
dashboard-ui/thirdparty/jquery.unveil-custom.js
vendored
|
@ -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();
|
||||
|
||||
})();
|
Loading…
Add table
Add a link
Reference in a new issue